Modal dialog

How to use it

Use for a short confirmation the user must act on before continuing, such as confirming a destructive action. Keep the content to one short question and two actions; do not use a modal for a long form or for information the user can simply read inline.

Accessibility

role="dialog" and aria-modal="true" mark the panel as a modal to assistive tech, aria-labelledby points at its heading, opening it moves focus to the first action inside, closing it (Cancel, Delete, or Escape) returns focus to the button that opened it, and every control is a native <button>. Panel text contrast is 17.85:1 and the danger button's white-on-red is well above 4.5:1.

Source (copy-ready)

<div class="dcl-modal-demo">
  <button type="button" class="dcl-button dcl-button--primary" id="dcl-modal-open" aria-haspopup="dialog" aria-controls="dcl-modal">Delete item</button>
  <div class="dcl-modal" id="dcl-modal" role="dialog" aria-modal="true" aria-labelledby="dcl-modal-title" hidden>
    <div class="dcl-modal__panel">
      <h2 id="dcl-modal-title" class="dcl-modal__title">Confirm deletion</h2>
      <p class="dcl-modal__body">This removes the item permanently. This action cannot be undone.</p>
      <div class="dcl-modal__actions">
        <button type="button" class="dcl-button dcl-button--secondary" id="dcl-modal-cancel">Cancel</button>
        <button type="button" class="dcl-button dcl-button--danger" id="dcl-modal-confirm">Delete</button>
      </div>
    </div>
  </div>
</div>
<style>
.dcl-button { font: inherit; padding: 0.6rem 1.25rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-weight: 600; }
.dcl-button--primary { background-color: #1d4ed8; color: #ffffff; }
.dcl-button--secondary { background-color: #e2e8f0; color: #0f172a; }
.dcl-button--danger { background-color: #b91c1c; color: #ffffff; }
.dcl-button:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }
.dcl-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.dcl-modal__panel { background-color: #ffffff; color: #0f172a; padding: 1.25rem; border-radius: 8px; max-width: 22rem; }
.dcl-modal__title { margin-top: 0; color: #0f172a; background-color: #ffffff; }
.dcl-modal__body { color: #0f172a; background-color: #ffffff; }
.dcl-modal__actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
</style>
<script>
(function () {
  var openButton = document.getElementById("dcl-modal-open");
  var modal = document.getElementById("dcl-modal");
  var cancelButton = document.getElementById("dcl-modal-cancel");
  var confirmButton = document.getElementById("dcl-modal-confirm");

  function openModal() {
    modal.hidden = false;
    cancelButton.focus();
  }

  function closeModal() {
    modal.hidden = true;
    openButton.focus();
  }

  openButton.addEventListener("click", openModal);
  cancelButton.addEventListener("click", closeModal);
  confirmButton.addEventListener("click", closeModal);
  modal.addEventListener("keydown", function (event) {
    if (event.key === "Escape") { closeModal(); }
  });
})();
</script>