dialog

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

NameValueDescription
openopen | emptyelement 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);
}

Examples

1 · not open

2 · open

3 · modal

4 · CSS

5 · JS

HomeMenu