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.