Modal libraries are obsolete — <dialog> gives focus trapping, Esc-to-close and a styleable backdrop natively.
Complete working modal
<dialog id="confirm">
<h3>Delete this item?</h3>
<form method="dialog"> <!-- buttons close the dialog automatically -->
<button value="cancel">Cancel</button>
<button value="yes">Delete</button>
</form>
</dialog>
<script>
const dlg = document.getElementById("confirm");
openBtn.onclick = () => dlg.showModal(); // modal: blocks page behind
dlg.addEventListener("close", () => {
if (dlg.returnValue === "yes") deleteItem();
});
// close on backdrop click:
dlg.onclick = (e) => { if (e.target === dlg) dlg.close(); };
</script>The backdrop
dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
dialog { border: none; border-radius: 14px; padding: 24px; }showModal() traps Tab focus inside and supports Esc — accessibility you'd otherwise hand-build. show() (non-modal) skips the backdrop for toasts/panels.