demo · v152

Backdrop Click

Open the dialog, click the dimmed backdrop. Current Chrome exposes ::backdrop for styling and computed-style reads, but not as a dialog.pseudo("::backdrop") event target. This demo uses the reliable dialog-rect hit-test and logs the runtime probe.

Click anywhere outside this dialog. The backdrop is styled with ::backdrop; JavaScript closes the dialog only when the click lands outside the measured dialog rectangle.

the code

dialog.addEventListener("click", event => {
  const box = dialog.getBoundingClientRect();
  const insideDialog =
    event.clientX >= box.left && event.clientX <= box.right &&
    event.clientY >= box.top  && event.clientY <= box.bottom;

  if (!insideDialog) dialog.close("backdrop");
});

// Probe only: current Chrome does not expose ::backdrop here.
const backdrop = dialog.pseudo?.("::backdrop");

see also