Modals with dialog

The <dialog> element is Baseline widely available. You open it from JavaScript, in two ways: showModal() opens it as a modal, and show() opens it without a modal, with no backdrop and the page still usable. With showModal() the browser gives you for free:

1. Top layertop layerThe modal sits above everything, with no fighting z-index or its parents' overflow.
2. Inert backgroundinertThe rest of the page gets no clicks or focus, so Tab only moves through the modal.
3. EscapeEscCloses it, and focus goes back to the element that opened it.
4. Backdrop::backdropA pseudo-element behind the modal that you can dim.

A <form method="dialog"> inside closes the modal when submitted, without a line of JavaScript. Open each one with its button, close it with Escape and watch where focus goes. A transition takes its duration from the state it goes to: that's why the [open] rule carries the opening time and the base rule the closing one, 60% shorter, because closing shouldn't keep anyone waiting.

Show code for

dialognotice

checking @starting-style…

Moraine Lake

Banff · October

ShareDelete

4 photos in the album

Delete this photo?

Moraine Lake

It's removed from the album and from all your devices. You can't undo it from here.

CancelDelete photo

Share “Moraine Lake”

Copy linkSend as messageDownload

opens250ms

closes150ms

animated exit

dialog.css

.dialog {
  opacity: 0;
  translate: 0 8px;
  scale: 0.96;
  transition-property: opacity, translate, scale;
  transition-duration: 150ms; /* while closing */
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.dialog[open] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition-duration: 250ms; /* while opening */
}

.dialog::backdrop {
  background-color: rgb(0 0 0 / 0);
  transition-property: background-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 0.4);
  transition-duration: 250ms;
}

/* no support: opens and closes without animation */
@supports (transition-behavior: allow-discrete) {
  .dialog {
    transition-property: opacity, translate, scale, display, overlay;
    transition-behavior: allow-discrete;
  }

  .dialog::backdrop {
    transition-property: background-color, display, overlay;
    transition-behavior: allow-discrete;
  }

  /* after [open]: same specificity, the last one wins */
  @starting-style {
    .dialog[open] {
      opacity: 0;
      translate: 0 8px;
      scale: 0.96;
    }

    .dialog[open]::backdrop {
      background-color: rgb(0 0 0 / 0);
    }
  }
}

/* reduced motion: keep the fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .dialog,
  .dialog[open] {
    translate: none;
    scale: none;
  }
}

dialog.html

<!-- opened with dialog.showModal() -->
<dialog
  class="m-auto rounded-xl bg-white p-4 dark:bg-neutral-900
    opacity-0 motion-safe:translate-y-2 motion-safe:scale-96
    open:opacity-100 open:translate-y-0 open:scale-100
    transition-[opacity,translate,scale,display,overlay] transition-discrete duration-150 open:duration-250 ease-[cubic-bezier(0.22,1,0.36,1)]
    starting:open:opacity-0 starting:open:motion-safe:translate-y-2 starting:open:motion-safe:scale-96
    backdrop:bg-black/0 backdrop:transition-[background-color,display,overlay] backdrop:transition-discrete backdrop:duration-150 open:backdrop:duration-250 backdrop:ease-[cubic-bezier(0.22,1,0.36,1)]
    open:backdrop:bg-black/40 starting:open:backdrop:bg-black/0"
>
  <p>Content</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

The popover attribute

The popover attribute turns any element into a popover, and a button with popovertarget opens and closes it without JavaScript. It's Baseline 2025: it works in current browsers, but test it in the ones your audience uses.

1<button popovertarget="notice">Open</button>
2
3<div id="notice" popover>
4  Content
5</div>

1. Light dismisspopover="auto"A click outside or Escape closes it, and opening another auto popover closes the previous one. It's what plain popover does.
2. Manualpopover="manual"Only closes with its button or from JavaScript, and several can stay open together.
3. Open:popover-openSelects the popover while it's open, like [open] on the modal.

The popover also goes to the top layer, but it isn't modal: the page stays usable. Use the modal when the person has to answer before moving on (confirm, fill in a form) and the popover for menus, hints and notices they can ignore.

showModal()the page waits

DeleteDelete this photo?

popoverthe page goes on

ShareShare “Iceberg”Copy linkSend as messageDownload:popover-open

Animating the entry and exit

The classic problem: a closed element has display: none, and display didn't transition. Two Baseline 2024 pieces solve it. @starting-style sets the style the entry starts from, and transition-behavior: allow-discrete lets display wait for the exit to finish. Add overlay so the element doesn't leave the top layer too early; it has limited availability, so where it's missing the exit loses part of the effect.

a modal, start to finishopens 250ms · closes 150ms

@starting-stylestarts invisible, 8px lower

[open] · 250msrises and fades in

allow-discrete · 150msdisplay: none waits for the fade

1.dialog {
2  opacity: 0;
3  transition-property: opacity, display, overlay;
4  transition-duration: 200ms;
5  transition-behavior: allow-discrete;
6}
7
8.dialog[open] {
9  opacity: 1;
10}
11
12@starting-style {
13  .dialog[open] {
14    opacity: 0;
15  }
16}

1. Order matters@starting-styleIt goes after the [open] rule, because they have the same specificity and the last one wins.
2. Mind the shorthandtransitionIt resets transition-behavior to normal: write allow-discrete after it, or inside the shorthand.
3. Progressive enhancement@supportsWithout support, the modal opens and closes without animation. That's why the demo's CSS groups the new parts in @supports.

With prefers-reduced-motion: reduce, keep the fade and drop the movement and the scale. And if you see :open, it's Baseline 2026: it does the same as [open], which works everywhere today.

In Tailwind

Tailwind v4 has a variant for each piece. open: covers [open], :popover-open and :open at once, so the same classes work for the modal and the popover.

1<button popovertarget="notice">Open</button>
2
3<div id="notice" popover
4  class="m-auto rounded-xl bg-white p-4
5    opacity-0 open:opacity-100 starting:open:opacity-0
6    transition-[opacity,display,overlay] transition-discrete duration-200"
7>
8  Content
9</div>