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.



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

You can remove the page scroll when the modal is active by adding the has-clip modifier to the HTML tag.


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

You can quickly change the color of the background using the $modal-overlay-background variable.


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

Use the $modal-size-variations list variable to edit or add size modifiers.


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.



<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.



<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

You will need to add the has-no-padding global modifier to the modal__content element when using cards.


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.


VariableTypeDefault value
$modal-backgroundcolorhsl(0deg, 0%, 100%, 1)
$modal-colorcolorhsl(0deg, 0%, 22%, 1)
$modal-radiusunits0
$modal-widthunits600px
$modal-paddingunits1rem
$modal-overlay-backgroundcolorhsl(0deg, 0%, 22%, 0.5)
$modal-size-variationslist'small' 25%,
'medium' 45%,
'large' 75%