Modal

A component for changing the mode of a page to complete a critical task. This is usually used in conjunction with the Dialog component to make modal dialogs.

The core parts of a modal include the following elements:

  • modal__trigger: The initial modal trigger. Uses the data-modal attribute to set trigger target.
  • modal
    • modal__dialog
      • modal__trigger: Used without the data-modal attribute for closing modal from within a dialog.
<button class="modal__trigger" data-modal="modal-example-1">Modal</button>

<div class="modal" id="modal-default">
  <div class="modal__dialog">
    ...
  </div>
</div>
<div class="modal modal_size_sm" id="modal-size-sm">...</div>
<div class="modal modal_size_lg" id="modal-size-lg">...</div>
<div class="modal modal_full" id="modal-full">...</div>
<div class="modal modal_pos_top" id="modal-pos-top">...</div>
<div class="modal modal_pos_bottom" id="modal-pos-bottom">...</div>
<div class="modal modal_pos_left" id="modal-pos-left">...</div>
<div class="modal modal_pos_right" id="modal-pos-right">...</div>