2.18 #Components.modal Modal
A modal component showing fullscreen.
Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+
Modal header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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">×</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