HTML dialog Tag

The <dialog> tag in HTML5 defines a dialog box or window. It can be used for pop-up notifications, messages, or custom user interactions. The <dialog> element can be shown or hidden using JavaScript, providing a native way to create modal interfaces.

HTML

<!DOCTYPE html>
<html>

<body>
    <dialog open>
        Welcome to GeeksforGeeks
    </dialog>
</body>

</html>

Syntax

<dialog open> Contents... </dialog>

Attributes

open attribute: It is used to specify that the dialog element is active and the user can interact with it. However, it’s important to note that this tag is now deprecated from HTML.

<dialog> tag with Image and Button

HTML

<!DOCTYPE html>
<html>
 
<body>
    <dialog open>
        <img src="path/to/image.jpg" alt="Preview Image">
        <button onclick="document.querySelector('dialog').close();">
            Close
        </button>
    </dialog>
</body>

</html>

Syntax

Attributes

<dialog> tag with Image and Button

Explore