dialog vs div overlay?

dialog with showModal() blocks interaction and supports ::backdrop; div needs more ARIA/JS.

How to animate modal in?

Use @keyframes on dialog[open] or transform on panel with prefers-reduced-motion fallback.

dialog closes on backdrop click by default; div overlays need click handler.

Open with showModal; close with close().

Open modal

Click Open then Close.

dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}
dialog {
  border: none;
  border-radius: 12px;
  padding: 1.5rem;
}

Full-screen layer with centered card.

Overlay card

Simulated overlay layout (visual only).

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.5);
}

Toggle overflow hidden on documentElement when open.

Note

Use document.documentElement.style.overflow = 'hidden' while modal is open.

Pair CSS layout with minimal JS.

html.modal-open { overflow: hidden; }

dialog vs div overlay?: dialog with showModal() blocks interaction and supports ::backdrop; div needs more ARIA/JS.
How to animate modal in?: Use @keyframes on dialog[open] or transform on panel with prefers-reduced-motion fallback.
Click outside to close?: dialog closes on backdrop click by default; div overlays need click handler.