dialog
Description
The dialog element for HTML 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: rgb(0 0 0 / 0.1);
}Examples
1 · closed
2 · open
3 · CSS
4 · JS · show
5 · JS · showModal
6 · JS · show showModal
Links
Elements
- !doctype
- a
- abbr
- address
- area
- article
- aside
- audio
- b
- base
- bdi
- bdo
- blockquote
- body
- br
- button
- canvas
- caption
- cite
- code
- col
- colgroup
- data
- datalist
- dd
- del
- details
- dfn
- div
- dl
- dt
- em
- embed
- fieldset
- figcaption
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- head
- header
- hgroup
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- label
- legend
- li
- link
- main
- map
- mark
- menu
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- progress
- q
- rb
- rp
- rt
- rtc
- ruby
- s
- samp
- script
- search
- section
- select
- slot
- small
- source
- span
- strong
- style
- sub
- summary
- sup
- table
- tbody
- td
- template
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- u
- ul
- var
- video
- wbr