Modals

Accessible modal dialogs with focus trapping, ARIA support, size variations, fullscreen and scrollable layouts, and CSS transitions.

Basic modal

<button data-ms-trigger="modal:#demoModal">Open</button>
<div id="demoModal" class="ms-modal" data-ms="modal">
  <div class="ms-modal-dialog">
    <div class="ms-modal-content">
      <div class="ms-modal-header">...</div>
      <div class="ms-modal-body">...</div>
      <div class="ms-modal-footer">...</div>
    </div>
  </div>
</div>

Size variations

Apply a size class to .ms-modal-dialog to control the maximum width.

<div class="ms-modal-dialog ms-modal-size-sm">...</div> <!-- 300px -->
<div class="ms-modal-dialog">...</div>                 <!-- 500px (default) -->
<div class="ms-modal-dialog ms-modal-size-lg">...</div> <!-- 800px -->
<div class="ms-modal-dialog ms-modal-size-xl">...</div> <!-- 1200px -->

Fullscreen & scrollable

<!-- Fullscreen -->
<div class="ms-modal-dialog ms-modal-fullscreen">...</div>

<!-- Scrollable body -->
<div class="ms-modal-dialog">
  <div class="ms-modal-content ms-modal-scrollable">...</div>
</div>

Fade transition

Add ms-modal-fade to the .ms-modal element to fade the overlay and dialog in/out.

<div id="fadeModal" class="ms-modal ms-modal-fade" data-ms="modal">...</div>