2.18 #Components.modal Modal

Toggle example guides Toggle HTML markup

A modal component showing fullscreen.

Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+

Markup
<div class="sb-modal sb-modal--open" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDesc" data-kss-animation-switch="sb-modal--open,sb-modal--close" data-kss-animation-name="Dialog open/close">
  <div class="sb-modal__backdrop" aria-hidden="true"></div>
  <div class="sb-modal__dialog" role="document">
    <div class="sb-modal__content">
      <button class="sb-modal__close sb-btn sb-btn--subtle" aria-label="Close">
        <span class="sb-icon sb-icon--close" aria-hidden="true">&times;</span>
      </button>
      <h1 class="sb-title sb-padding-top-s" id="modalTitle">Modal header</h1>
      <p class="sb-text sb-margin-bottom-l" id="modalDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="sb-text--right">
        <button class="sb-btn sb-btn--subtle sb-margin-right">Cancel</button>
        <button class="sb-btn sb-btn--primary">OK button</button>
      </div>
    </div>
  </div>
</div>
Source: components/_modal.scss, line 1