Modal Dialog Stable

Modal dialogs are used for processes that need a decision by the user. They are shown with a layer above the site content.

Normal dialog

<div class="js-modal-dialog modal-dialog" tabindex="-1" id="modal1" role="dialog" aria-modal="true" aria-labelledby="modal1_title" aria-describedby="modal1_desc"
  aria-hidden="true" data-linked="#modal1" >
  <div class="modal-dialog__container" role="document">
    <div class="modal-dialog__header">
      <i aria-hidden="true" class="modal-dialog__indicator"></i>
      <h5 class="modal-dialog__title" id="modal1_title">Dialog title</h5>
      <button type="button" class="modal-dialog__close" data-dismiss="modal-dialog" aria-label="Close">
        <i aria-hidden="true" class="icon-close"></i>
      </button>
    </div>
    <div id="modal1_desc" class="modal-dialog__body">
      <p>Message dolor sit amet, consectetur adipis tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="modal-dialog__footer">
      <button type="button" class="button button" data-dismiss="modal-dialog">Cancel</button>
      <button type="button" class="button button--primary" data-dismiss="modal-dialog">Accept</button>
    </div>
  </div>
</div>

Success dialog

<div class="js-modal-dialog modal-dialog modal-dialog--success" … >
  ...
</div>

Warning dialog

<div class="js-modal-dialog modal-dialog modal-dialog--warning" … >
  ...
</div>

Error dialog

<div class="js-modal-dialog modal-dialog modal-dialog--error" … >
  ...
</div>