The dialog element

Baseline 2022 Reference ↗

<dialog> gives modal UI a top layer, focus handling, Escape-to-close behavior, and a real semantic element. JavaScript only needs to open and close it.

<button id="open">Delete item</button>

<dialog id="confirm" aria-labelledby="confirm-title">
  <h2 id="confirm-title">Delete item?</h2>
  <button id="cancel">Cancel</button>
</dialog>

open.addEventListener('click', () => confirm.showModal());
cancel.addEventListener('click', () => confirm.close());

Use a dialog only for an actual dialog. Provide a visible close action, label it clearly, and test keyboard focus instead of assuming the native element solves every accessibility detail.