HTML Tags
HTML <dialog> Tag
The
<dialog>tag represents a dialog box or modal window that can contain interactive content such as text, forms, or buttons.
It can be opened or closed using theopenattribute or JavaScript methods.
The<dialog>element is ideal for creating pop-ups, confirmation boxes, or form modals without external JavaScript libraries.
Syntax
html
<dialog open>
Content goes here...
</dialog>Attributes
| Attribute | Description |
|---|---|
| open | Specifies that the dialog is currently open. |
| id | Assigns a unique identifier to the dialog. |
| class | Specifies one or more class names for CSS styling. |
| style | Applies inline CSS styles. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog Tag Example</title>
</head>
<body>
<h1>Dialog Tag Example</h1>
<!-- Dialog Element -->
<dialog id="infoDialog">
<p>This is a sample dialog box using the <dialog> tag.</p>
<button id="closeBtn">Close</button>
</dialog>
<!-- Open Dialog Button -->
<button id="openBtn">Open Dialog</button>
<script>
const dialog = document.getElementById("infoDialog");
const openBtn = document.getElementById("openBtn");
const closeBtn = document.getElementById("closeBtn");
openBtn.addEventListener("click", () => dialog.showModal());
closeBtn.addEventListener("click", () => dialog.close());
</script>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browsers support <dialog> except of IE.
Notes
- The dialog can be shown using
.show()or.showModal()JavaScript methods. - Use the
::backdropCSS pseudo-element to style the overlay behind a modal dialog. - The
<dialog>element improves accessibility when used with focus management and ARIA roles. - It is not supported in Internet Explorer.
Conclusion
The <dialog> tag is a modern and semantic way to create modal windows or popups.
It simplifies implementation compared to traditional JavaScript modals and provides built-in accessibility and focus control.