View video tutorial

HTML <dialog> Tag


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>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.


<dialog id="favDialog">
    <form method="dialog">
        <p><label>Favorite Food:
                    <option value="default">Select One...</option>
                    <option>Inlagd Sill</option>
                    <option>Gravad lax</option>
                    <option>Boston Crab Meat</option>
            <button value="cancel">Cancel</button>
            <button id="confirmBtn" value="confirm">Confirm</button>
    if (typeof favDialog.showModal !== 'function') {
        favDialog.hidden = true;
    updateButton.addEventListener('click', function onOpen() {
        if (typeof favDialog.showModal === "function") {
        } 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;
Try it Now »

Click on the "Try it Now" button to see how it works.