2.23 #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">
        <svg class="sb-icon sb-color-light-1 sb-icon--s" viewBox="0 0 17 17" aria-hidden="false"><path d="M2.70710678,1.29289322 L8,6.585 L13.2928932,1.29289322 C13.6533772,0.932409257 14.2206082,0.904679722 14.6128994,1.20970461 L14.7071068,1.29289322 C15.0976311,1.68341751 15.0976311,2.31658249 14.7071068,2.70710678 L14.7071068,2.70710678 L9.415,8 L14.7071068,13.2928932 C15.0976311,13.6834175 15.0976311,14.3165825 14.7071068,14.7071068 C14.3165825,15.0976311 13.6834175,15.0976311 13.2928932,14.7071068 L8,9.415 L2.70710678,14.7071068 C2.34662282,15.0675907 1.77939176,15.0953203 1.38710056,14.7902954 L1.29289322,14.7071068 C0.902368927,14.3165825 0.902368927,13.6834175 1.29289322,13.2928932 L1.29289322,13.2928932 L6.585,8 L1.29289322,2.70710678 C0.902368927,2.31658249 0.902368927,1.68341751 1.29289322,1.29289322 C1.68341751,0.902368927 2.31658249,0.902368927 2.70710678,1.29289322 Z"></path></svg>
      </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