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);
}
