Modal

A flexible pop-up container

Modals are a simple flex based pop-up container used for displaying dialogs, user-notifications, or custom content over the current page. An OrbitCSS Modal is made up of the `modal` block and the following elements.

• modal__background
• modal__content
• modal__close

The modal can be triggered by toggling the is-active modifier on the modal block.

Launch example modal

<div class="modal">
  <div class="modal__background"></div>
  <div class="modal__content">
    <p>I'm a modal</p>
  </div>
</div>
Copy

---

Background

The modal__background element add a dark overlay to the page and underneath the modal__content element.

<div class="modal">
  <div class="modal__background"></div>
  <div class="modal__content">
    <p>This is an example modal with a background element.</p>
  </div>
</div>

<div class="modal">
  <div class="modal__content">
    <p>This is an example modal without a background element. Click anywhere within the modal to close.</p>
  </div>
</div>
</> Show code
Copy

---

Content size

The default size of the modal__content element is 600px wide, with the exception of mobile viewports where the width will always be 100%. For convenience the following responsive modifiers exist for controlling the size of the modal's content.

• is-small 25%
• is-medium 50%
• is-large 75%
• is-full 100%

<div class="modal is-small">
  ...
</div>

<div class="modal is-medium">
  ...
</div>

<div class="modal is-large">
  ...
</div>

<div class="modal is-full">
  ...
</div>
</> Show code
Copy

---

Closable

The modal__close element is a container built to work with the close button from the button module. This can be used to position a close button either in the top right corner of the modal content or the entire screen.

Launch closable modal

<div class="modal">
  <div class="modal__background"></div>
  <div class="modal__close">
    <a class="button--close"></a>
  </div>
  <div class="modal__content">
    <div class="modal__close">
      <a class="button--close"></a>
    </div>
    <p>This modal has a closable button in the top right corner of the modal content and the screen. Click either to close the modal.</p>
  </div>
</div>
</> Show code
Copy

---

Card

The OrbitCSS Card element can be used alongside the modal element to create a clean, classic looking modal.

Launch card modal

<div class="modal">
  <div class="modal__background"></div>
  <div class="modal__content has-no-padding">
    <div class="card">
      <div class="card__header">
        <h4>A card header</h4>
      </div>
      <div class="card__content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="card__footer">
        <button class="button">Cancel</button>
        <button class="button is-primary">Confirm</button>
      </div>
    </div>
  </div>
</div>
</> Show code
Copy

---

CSS variables

Override the default modal styling with CSS variables.

.modal {
  --overlay-background-color: var(--color-black-overlay);
  --background-color: var(--color-white);
  --font-color: var(--color-black);
  --border-radius: 0;
  --width: 600px;
  --padding: 1rem;
}
Copy

---

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.