Native <dialog> Modal

<button id="open-dialog">Open dialog</button>

<dialog id="confirm-dialog">
    <form method="dialog">                              <!-- form method=dialog closes on submit -->
        <h2>Delete this snippet?</h2>
        <p>This permanently deletes the snippet and its comments.</p>
        <menu>
            <button value="cancel">Cancel</button>
            <button value="confirm" autofocus>Delete</button>
        </menu>
    </form>
</dialog>

<script>
const dlg = document.getElementById('confirm-dialog');
document.getElementById('open-dialog').onclick = () => dlg.showModal();

dlg.addEventListener('close', () => {
    if (dlg.returnValue === 'confirm') {
        // user confirmed — perform delete
    }
});
</script>

<style>
dialog { border: 0; border-radius: 12px; padding: 24px; max-width: 420px; }
dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
dialog menu { display: flex; gap: 8px; justify-content: flex-end; padding: 0; margin-top: 16px; }
</style>