The dialog HTML element represents a part of an application that a user interacts with to perform a task.
Syntax
HTML
<dialog attribute-name="attribute-value"></dialog>
Attributes
Name | Value | Description |
---|---|---|
open | open | empty | element is active and the user can interact with it |
CSS
dialog { background: white; border: solid; color: black; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: fit-content; } dialog:not([open]) { display: none; } dialog::backdrop { background: rgba(0,0,0,0.1); }