HTML <dialog> and Popover API

The <dialog> Element — Native Modals

The HTML for a modal dialog:

<dialog id="my-dialog">
    <h2>Confirm Action</h2>
    <p>Are you sure you want to continue?</p>
    <form method="dialog">
        <button>Cancel</button>
        <button value="confirm">Confirm</button>
    </form>
</dialog>

<button id="open">Open Dialog</button>

And the JavaScript:

const dialog = document.getElementById("my-dialog");
document.getElementById("open").addEventListener("click", () => {
    dialog.showModal();
});

// A form with method="dialog" closes the dialog automatically
dialog.addEventListener("close", () => {
    console.log("Dialog closed with value:", dialog.returnValue);
});

What you get for free:

• Focus trapping — Tab cycles inside the modal only.
• ESC key closes the dialog.
• Backdrop styled with ::backdrop.
• Rendered in the top layer (above everything else).
• Restores focus to the trigger element when closed.

Styling the Modal

dialog {
    border: none;
    border-radius: 16px;
    padding: 32px;
    background: #1e293b;
    color: #e2e8f0;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* The backdrop behind the dialog */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

/* Animations */
dialog[open] {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

The ::backdrop pseudo-element is only available on <dialog> opened with showModal(). That's the modal backdrop — no extra HTML needed.

The Popover API — Non-Modal Overlays

The popover API requires zero JavaScript. Just two attributes:

<button popovertarget="my-popover">Open Menu</button>

<div id="my-popover" popover>
    <p>Popover content goes here.</p>
</div>

That's it. The browser handles opening, closing, ESC key, and click-outside dismissal. The popover renders in the top layer so it's never clipped by overflow: hidden ancestors.

You can also control it programmatically if needed:

const popover = document.getElementById("my-popover");

popover.showPopover();   // open
popover.hidePopover();   // close
popover.togglePopover(); // toggle

Popover Positioning

By default, popovers appear centered on screen. To anchor them to a trigger element, use CSS Anchor Positioning (supported in modern browsers) or manual positioning:

<button id="trigger" popovertarget="tip">Hover me</button>
<div id="tip" popover>Anchored popover</div>

<style>
    #tip {
        position: absolute;
        top: anchor(bottom);
        left: anchor(center);
        translate: -50% 8px;
        position-anchor: --trigger;
    }
    #trigger { anchor-name: --trigger; }
</style>

CSS Anchor Positioning is new but widely supported in Chrome 125+ and Safari 26+. For full cross-browser, you can fall back to a small amount of JavaScript.

Choosing Dialog vs Popover

Rule of thumb: If the user must respond before continuing, use <dialog>. If the overlay is informational or optional, use popover.