Modal

<button type="button" class="md-open" id="dlgOpen">Open modal</button>
<div id="dlgBackdrop" class="modal-backdrop" hidden></div>
<div id="dlg" class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="dlgTitle" hidden>
  <div class="modal-dialog__panel">
    <header class="modal-dialog__head">
      <h2 id="dlgTitle" class="modal-dialog__title">Delete project?</h2>
      <button type="button" class="modal-dialog__x" id="dlgClose" aria-label="Close dialog">✕</button>
    </header>
    <p class="modal-dialog__body">This removes the project for all members. This action cannot be undone.</p>
    <footer class="modal-dialog__foot">
      <button type="button" class="md-btn md-btn--ghost" id="dlgCancel">Cancel</button>
      <button type="button" class="md-btn md-btn--danger" id="dlgConfirm">Delete</button>
    </footer>
  </div>
</div>