HTML <dialog>
Tag
HTML
The <dialog>
HTML element shows a dialog box or sub window.
HTML <dialog>
Tag
The <dialog>
HTML element represents a dialog box or other popup component.
The <open>
attribute indicates that the dialog is active.
It is recommended to use show()
or showModal()
method to render dialog instead of open attribute.
Element Attributes
Attribute | Value | Description |
---|---|---|
open |
open | Specifies that the dialog is active and can be interacted. |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>
,
<class>
,
<contenteditable>
,
<contextmenu>
,
<data-*>
,
<dir>
,
<draggable>
,
<dropzone>
,
<hidden>
,
<id>
,
<lang>
,
<spellcheck>
,
<style>
,
<tabindex>
,
<title>
,
<translate>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<dialog id="favDialog">
<form method="dialog">
<p><label>Favorite Food:
<select>
<option value="default">Select One...</option>
<option>Inlagd Sill</option>
<option>Gravad lax</option>
<option>Boston Crab Meat</option>
<option>Ikura</option>
</select>
</label></p>
<div>
<button value="cancel">Cancel</button>
<button id="confirmBtn" value="confirm">Confirm</button>
</div>
</form>
</dialog>
<script>
if (typeof favDialog.showModal !== 'function') {
favDialog.hidden = true;
}
updateButton.addEventListener('click', function onOpen() {
if (typeof favDialog.showModal === "function") {
favDialog.showModal();
} else {
outputBox.value = "The browser do not support <dialog> API.";
}
});
favDialog.addEventListener('close', function onClose() {
if (favDialog.returnValue == 'cancel') {
selectedItem = "";
} else if (favDialog.returnValue == 'confirm') {
selectedItem = ", selected: " + selectEl.value;
}
outputBox.value = favDialog.returnValue + " button clicked " + selectedItem;
});
</script>
Click on the "Try it Now" button to see how it works.