Menu Samaritan's Purse

DIALOG

The dialog 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

Global

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

EXAMPLES

OPEN

CSS

Web Hypertext Application Technology Working Group (WHATWG)