Modal Development

Default

Open modal

Change the size of the modal

Small Default Large XXL Fullscreen

Props

Centered Scrollable

I'm baby disrupt vinyl direct trade viral heirloom thundercats sriracha etsy fashion axe roof party grailed. DSA green juice cupping echo park umami, knausgaard austin. Health goth art party coloring book, tote bag meh heirloom truffaut farm-to-table tilde. Praxis etsy hoodie yr. Kitsch farm-to-table everyday carry, synth 90's kinfolk green juice ascot chia whatever tumblr vape. Post-ironic gatekeep freegan beard JOMO letterpress, ugh raw denim migas try-hard brunch.

Freegan live-edge raclette kogi intelligentsia. Jean shorts celiac cliche yuccie. PBR&B pickled cupping ramps viral XOXO. Freegan knausgaard meh forage. Ugh umami fingerstache affogato bushwick. Chillwave flexitarian mumblecore keffiyeh freegan praxis, same grailed. Polaroid raclette gluten-free, deep v jawn letterpress hexagon farm-to-table copper mug neutra.

Activated charcoal sus man braid, slow-carb green juice austin you probably haven't heard of them single-origin coffee. Raw denim farm-to-table yuccie echo park health goth chambray, big mood neutra vexillologist kogi kinfolk vice. Cronut man bun solarpunk activated charcoal truffaut, actually occupy franzen whatever big mood sartorial fit. Vexillologist meggings readymade pug. Whatever green juice polaroid XOXO health goth.

Brooklyn forage vaporware wayfarers. Four loko selvage tofu umami paleo meggings cliche. Tofu beard neutra, coloring book meggings art party cronut meditation subway tile church-key umami tote bag messenger bag. Prism sustainable vaporware mixtape fixie gatekeep yr. Solarpunk palo santo ugh roof party keytar. Chambray asymmetrical narwhal bespoke bruh. Normcore tumblr fanny pack organic chartreuse celiac.

Everyday carry readymade blue bottle offal, grailed cred direct trade tonx pitchfork. Trust fund kitsch mumblecore cupping. La croix small batch kitsch, flexitarian bushwick bodega boys cupping four dollar toast. Microdosing PBR&B meditation food truck gastropub everyday carry enamel pin raclette deep v etsy cronut hammock brunch hashtag echo park. Four loko umami helvetica fashion axe af iceland hashtag cornhole tousled big mood ascot.

Close

Toggle dark mode

  <certara-button color="brand" id="open-sm-modal-button">Open modal</certara-button>
  <certara-modal id="sm-modal" size="sm" heading="Default modal">
    <div slot="body">
      <fieldset>
          <legend>Change the size of the modal</legend>
          <div class="btn-group">
            <button class="btn btn-outline--brand btn--sm" onclick="changeSize('sm', 'Small')">Small</button>
            <button class="btn btn-outline--brand btn--sm active" onclick="changeSize('md', 'Default')">Default</button>
            <button class="btn btn-outline--brand btn--sm" onclick="changeSize('lg', 'Large')">Large</button>
            <button class="btn btn-outline--brand btn--sm" onclick="changeSize('xl', 'Extra Large')">XXL</button>
            <button class="btn btn-outline--brand btn--sm" onclick="changeSize('fullscreen', 'Fullscreen')">Fullscreen</button>
          </div>
        </fieldset>
        <fieldset>
          <legend>Props</legend>
          <div class="btn-group">
            <button id="centered" class="btn btn-outline--brand btn--sm" onclick="toggleAttr(this, 'centered', ' centered')">Centered</button>
            <button id="scrollable" class="btn btn-outline--brand btn--sm" onclick="toggleAttr(this, 'scrollable', ' centered')">Scrollable</button>
          </div>
          <div class="mt-10">
            <p>
              I'm baby disrupt vinyl direct trade viral heirloom thundercats sriracha etsy fashion axe roof party grailed. DSA green juice cupping echo park umami, knausgaard
              austin. Health goth art party coloring book, tote bag meh heirloom truffaut farm-to-table tilde. Praxis etsy hoodie yr. Kitsch farm-to-table everyday carry, synth
              90's kinfolk green juice ascot chia whatever tumblr vape. Post-ironic gatekeep freegan beard JOMO letterpress, ugh raw denim migas try-hard brunch.
            </p>
            <p>
              Freegan live-edge raclette kogi intelligentsia. Jean shorts celiac cliche yuccie. PBR&amp;B pickled cupping ramps viral XOXO. Freegan knausgaard meh forage. Ugh
              umami fingerstache affogato bushwick. Chillwave flexitarian mumblecore keffiyeh freegan praxis, same grailed. Polaroid raclette gluten-free, deep v jawn letterpress
              hexagon farm-to-table copper mug neutra.
            </p>
            <p>
              Activated charcoal sus man braid, slow-carb green juice austin you probably haven't heard of them single-origin coffee. Raw denim farm-to-table yuccie echo park
              health goth chambray, big mood neutra vexillologist kogi kinfolk vice. Cronut man bun solarpunk activated charcoal truffaut, actually occupy franzen whatever big
              mood sartorial fit. Vexillologist meggings readymade pug. Whatever green juice polaroid XOXO health goth.
            </p>
            <p>
              Brooklyn forage vaporware wayfarers. Four loko selvage tofu umami paleo meggings cliche. Tofu beard neutra, coloring book meggings art party cronut meditation
              subway tile church-key umami tote bag messenger bag. Prism sustainable vaporware mixtape fixie gatekeep yr. Solarpunk palo santo ugh roof party keytar. Chambray
              asymmetrical narwhal bespoke bruh. Normcore tumblr fanny pack organic chartreuse celiac.
            </p>
            <p>
              Everyday carry readymade blue bottle offal, grailed cred direct trade tonx pitchfork. Trust fund kitsch mumblecore cupping. La croix small batch kitsch, flexitarian
              bushwick bodega boys cupping four dollar toast. Microdosing PBR&amp;B meditation food truck gastropub everyday carry enamel pin raclette deep v etsy cronut hammock
              brunch hashtag echo park. Four loko umami helvetica fashion axe af iceland hashtag cornhole tousled big mood ascot.
            </p>
          </div>
        </fieldset>
    </div>
    <div slot="footer">
      <certara-button id="close-modal-button" color="secondary">Close</certara-button>
    </div>
  </certara-modal>

  <!--
  NOTE: In React, the below can be managed by using useState to control
  the modal's "open" attribute and an onCertaraClick listener on the
  certara-button to toggle the state
  -->
  <script>
    const openModalButton = document.getElementById('open-sm-modal-button');
    const closeModalButton = document.getElementById('close-modal-button');
    const modal = document.getElementById('sm-modal');

    openModalButton.addEventListener('certaraClick', () => {
      modal.open = true;
    })

    closeModalButton.addEventListener('certaraClick', () => {
      modal.open = false;
    })

    changeSize = (size, sizeLabel) => {
      modal.setAttribute('size', size);
      modal.setAttribute('heading', sizeLabel);
    };

    toggleAttr = (item, attribute, label) => {
      modal.toggleAttribute(attribute);
      item.classList.toggle('btn-outline--brand');
      item.classList.toggle('btn--brand');
    };
  </script>

certara-modal

Component for modal and dialog content

Properties

centered

Attribute	centered
Type	boolean
Default	false
Required	false
Description	Boolean value to center the modal vertically in the view port. If false, the modal will appear at the top of the screen.

heading

Attribute	heading
Type	string
Default	undefined
Required	false
Description	The text to display in the heading of the modal

modeless

Attribute	modeless
Type	boolean
Default	false
Required	false
Description	Will set modal to modeless, allowing interaction with the rest of the page and remvoing the backdrop.

open

Attribute	open
Type	boolean
Default	false
Required	false
Description	Boolean value to open and close the modal. If true, the modal will appear, if false, the modal will hide.

position

Attribute	position
Type	"left" | "right"
Default	'left'
Required	false
Description	Anchor position of modal only when sidebar=‘true’. Valid values are ‘left’ and ‘right’ (default is ‘left’).

scrollable

Attribute	scrollable
Type	boolean
Default	false
Required	false
Description	If true, the body of the modal will be scrollable if the contents reach overflow. If false, the entire modal, including header and footer will be scrollable if the content reaches overflow.

sidebar

Attribute	sidebar
Type	boolean
Default	false
Required	false
Description	If true, this will render the modal appearing as an anchored sidebar (default anchor position is left of viewport)

size

Attribute	size
Type	"fullscreen" | "lg" | "md" | "sm" | "xl"
Default	'md'
Required	false
Description	The size of the modal

Events

Name	Description	Bubbles
certaraClose	Fired when the modal is closed via the close button, or the escape key.	true

Methods

There are no public methods available for this component

Slots

Name	Description
body	Slot for the modal body content
footer	Slot for the footer content, typically action buttons
header	Slot for the modal header content. Use this if you need more custom content in the heading. If you just need a title, use the heading attribute.

Legacy

Relies on the third-party libraryBootstrap 4.6for its features and functionality.View Bootstrap’s modal doc

Default (medium)

Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary Tertiary

Toggle dark mode

Small

Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary Tertiary

Toggle dark mode

Large

Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary Tertiary

Toggle dark mode

Extra Large

Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary Tertiary

Toggle dark mode

Full Screen

Modal title

This is a full screen modal that is approximated in this preview box for demonstration purposes. It would normally encompass the entirety of the page.

Primary Secondary Tertiary

Toggle dark mode

HTML

<!-- this sets a black overlay over the entire viewport with opacity-->
<div class="modal-backdrop show"></div>
<!--  modal container -->
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-keyboard="true" data-backdrop="static" style="display:block">
  <!--  actual modal width -->
  <div class="modal-dialog modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">…</h3>
        <button type="button" class="btn--close" data-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">…</div>
      <div class="modal-footer">…</div>
    </div>
  </div>
</div>

NameDescriptionClassCopy

1. header
   Heading content. Contains the title and the close icon.
   .modal__header
   <div class="modal__header">…</div>Copy to Clipboard
2. title
   The semantic title of the modal
   .modal__title
   <h3 class="modal__title">…</h3>Copy to Clipboard
3. dismiss
   Closes the modal
   .btn-close
   <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>Copy to Clipboard
4. description
   Description content
   .modal__body
   <div class="modal__body">…</div>Copy to Clipboard
5. footerClasses
   footer content
   .modal__footer
   <div class="modal__footer">…</div>Copy to Clipboard
6. brand button
   Primary CTA
   .btn—brand
   <button class='btn btn--brand btn-sm'>…</button>Copy to Clipboard
7. light button
   Secondary CTA
   .btn—secondary
   <button class='btn btn--secondary btn-sm'>…</button>Copy to Clipboard
8. link button
   Heading content
   .btn-link
   <button class='btn btn-link btn-sm'>… <svg class='icon' aria-hidden='true'><use xlinkHref='/assets/svg/regular.svg#arrow-up-right-from-square'></use></svg></button>Copy to Clipboard

Name

Size

ClassCopy

1. Small
   350px
   .modal—sm
   modal--smCopy to Clipboard
2. Large
   800px
   .modal—lg
   modal--lgCopy to Clipboard
3. X-large
   1200px
   .modal—xl
   modal--xlCopy to Clipboard
4. Fullscreen
   Width of viewport
   .modal—fullscreen
   modal--fullscreenCopy to Clipboard

Twirl

app/views/components/modal.scala.html

@modal(title = "", id = "", isDismissable = true, isFullScreen = false) {
  (…body)
} {
  (…buttons)
}

PropTypeDefaultDescription

• isDismissable
  boolean
  true

  appends close button to modal-header

• isFullScreen
  boolean
  false
  makes the modal expand the full width of the viewport
• width
  string

  md | sm | lg | xl

  modal size
• id
  string
  none
  add id to modal

SlotType

1. {body}
   html
2. {buttons}

   html (outputs call-to-actions in modal-footer)

React

React example

import Modal from 'react-bootstrap/Modal';

const Example = () => (
  <Modal id="" show={props.show} onHide={props.onHide} role="dialog" dialogClassName="">
    <Modal.Header closeButton>
      <Modal.Title>…</Modal.Title>
    </Modal.Header>
    <Modal.Body>…</Modal.Body>
    <Modal.Footer>…</Modal.Footer>
  </Modal>
);

render(<Example />);

PropTypeDefaultDescription

1. id
   string
   none
   add id to modal
2. show
   none
   function for when modal is invoked
3. onHide
   none
   function for when modal is hidden
4. dialogClassName
   string
   none
   appended to .modal-dialog, i.e. modal-dialog-lg