← Overview

dialog

Accessible dialog/modal built on the native <dialog> element.

Modal (default): opens in the top layer with a backdrop and a trapped focus ring. Close it with the × button, the Cancel button, the Esc key or a click on the backdrop.

Subscribe

This is a native modal dialog. Focus is trapped inside it, the page behind it is inert, and closing the dialog returns focus to the button that opened it — all handled by the browser.

Static: adding data-dialog-static disables backdrop-click and Esc dismissal, so the dialog can only be closed by an explicit action — useful for a confirmation the user must answer.

Delete file?

This action cannot be undone. The backdrop and the Esc key will not close this dialog — pick an option below.

Non-modal: adding data-dialog-nonmodal opens the dialog with show() instead of showModal() — no backdrop, and the rest of the page stays interactive (e.g. a floating toolbox).

Quick note

A non-modal dialog. There is no backdrop and the page behind it remains scrollable and clickable.