Engrain by ByteRush

WEB.07.02 Mid-level· 11 minCore — asked often

dialog, popover and details: modals and menus without a library

What <dialog> with showModal() gives you for free, how the Popover API and the top layer work, light dismiss, <details> accordions, and the state of CSS anchor positioning.

Comes up in: Web fundamentals, UI coding, Machine coding

Learn#

Sanjay’s custom modal uses a div with z-index: 9999. Keyboard users tab behind it, screen readers read the page underneath, and a sticky header with z-index: 10000 covers the close button.

A modal dialog blocks the rest of the page until it is closed. <dialog> with showModal() gives you that for free:

<dialog id="confirm">
  <p>Delete your account?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="ok">Delete</button>
  </form>
</dialog>
<button onclick="confirm.showModal()">Delete account</button>

A form method="dialog" closes the dialog and sets returnValue to the clicked button’s value. No JavaScript is needed for closing.

For menus and tooltips, the popover attribute makes any element a popover: <button popovertarget="menu"> toggles <div id="menu" popover>. Both use the top layer, a layer above the whole page that no z-index can beat.

What showModal() does for youStep 1 of 4

Page

  • <dialog open> (top layer)

State

    empty

    The user clicks "Delete account". The code calls dialog.showModal().

    Read the steps as text
    1. The user clicks "Delete account". The code calls dialog.showModal().
    2. The dialog goes into the top layer, above everything, whatever the z-index. ::backdrop covers the page.
    3. The rest of the page becomes inert: no clicks, no Tab focus, hidden from screen readers. Focus moves into the dialog.
    4. Escape closes it. The close event fires, dialog.returnValue says which button was used, and focus returns to "Delete account".

    Predict#

    Predict first

    You open a <dialog> with dialog.show() instead of showModal(). Can the user still click the page behind it?

    Interview angle#

    Say it like this — about 30 seconds

    “showModal puts the dialog in the top layer, above every z-index, shows a ::backdrop, makes the rest of the page inert, moves focus inside, closes on Escape, and returns focus afterwards. form method dialog closes it and sets returnValue. The Popover API makes any element a popover with one attribute: it uses the top layer and light dismiss, closing on outside click or Escape, but it does not make the page inert. details and summary give an accessible disclosure; a shared name makes an accordion.”

    Stays on your device. Nothing is uploaded.
    Follow-up What does dialog with showModal() give you for free?
    Top layer, backdrop, inert background, focus moved in and restored, Escape to close, and returnValue from form method dialog.
    Follow-up What is the Popover API and the top layer?
    The popover attribute shows an element in the top layer, above all content, with light dismiss; the top layer is a separate stacking layer above the document.
    Follow-up Dialog or popover for a dropdown menu?
    Popover: it should not block the page. Use a modal dialog when the user must answer before continuing.

    Practice#

    Guided

    Wrap <dialog> in a promise-based confirm, like window.confirm but styled and accessible.

    Done when

    • The message is shown and the dialog opens with showModal().
    • The promise resolves true only when it closes with returnValue “ok”.
    • An old returnValue is never reused.
    Your solution
    Ctrl/⌘ + Enter

    Remember#

    Try to answer each card before you open it. Then add them to your reviews.

    What does showModal() do that show() does not?

    Top layer, backdrop, inert page, Escape to close.

    How does form method="dialog" work?

    Submitting closes the dialog and sets returnValue to the button's value.

    What is light dismiss?

    Closing a popover by clicking outside it or pressing Escape.

    What is the top layer?

    A layer above the whole document, used by modal dialogs and popovers.

    Go deeper

    Four layers. Stop at the one your interview needs; each ends with a quick check.

    The core ideaEvery round
    <details><summary> is a built-in disclosure: keyboard and screen-reader ready. Giving several the same name makes an accordion where only one stays open (Chrome 120, Firefox 130, Safari 17.2).
    Check yourself: Which attribute makes several details elements an accordion?

    The same name attribute on each.

    How it works underneathSenior rounds

    Light dismiss closes popover="auto" (the default) on outside click or Escape, and opening one auto popover closes unrelated ones. popover="manual" stays open until code closes it, as for toasts. Popover support: Chrome 114, Firefox 125, Safari 17 .

    Check yourself: What does popover=&quot;manual&quot; change?

    No light dismiss; it closes only when your code or a button closes it.

    Edge cases and trapsWhere people slip

    A popover never makes the page inert, and focus is not trapped. For a modal flow, use showModal(). The closedby attribute controls how a dialog may be closed (Chrome 134, Firefox 141, not yet in Safari) .

    Check yourself: Does a popover make the page inert?

    No. Only a modal dialog does.

    In productionStaff-level answers

    CSS anchor positioning tethers a popover to its button with anchor-name and position-anchor, no JavaScript: Chrome 125, Firefox 147, Safari 26, with small differences until the latest versions.
    Until all your users have it, keep a fallback position.

    Check yourself: Which CSS feature places a popover next to its button?

    Anchor positioning (anchor-name and position-anchor).

    Finished the five steps? Mark it, and its cards join your reviews.

    Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

    Interview questions this answers

    • What does <dialog> with showModal() give you for free?
    • What is the Popover API and the top layer?