HTML <dialog> Tag – Popup / Modal Box
📌 Introduction
The <dialog> tag is used to create a popup window (modal dialog).
It can be:
- Shown or hidden using JavaScript
- Used for alerts, forms, confirmations
- Modern replacement for simple popup UI
🧱 Syntax
<dialog open>This is a dialog box</dialog>
💡 Example (Basic Dialog)
<!DOCTYPE html>
<html>
<head>
<title>Dialog Example</title>
</head>
<body>
<h2>Dialog Box Example</h2>
<dialog id="myDialog">
<p>Hello! This is a popup dialog.</p>
<button onclick="document.getElementById('myDialog').close()">
Close
</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">
Open Dialog
</button>
</body>
</html>
🖥️ Output Explanation
- Dialog is hidden by default
- Clicking "Open Dialog" shows it
- Clicking "Close" hides it
🎯 Important Methods
1. show()
dialog.show();
✔ Opens dialog (non-modal)
2. showModal()
dialog.showModal();
✔ Opens dialog with background locked (modal)
3. close()
dialog.close();
✔ Closes the dialog
🧠 Important Concept
👉 <dialog> is a native popup system in HTML
| Feature | Dialog |
|---|---|
| Built-in popup | ✔ |
| Needs JavaScript | ✔ (for control) |
| Modern UI support | ✔ |
🧩 Example (Login Popup)
<dialog id="login">
<h3>Login</h3>
<input type="text" placeholder="Username" /><br /><br />
<input type="password" placeholder="Password" /><br /><br />
<button onclick="login.close()">Close</button>
</dialog>
<button onclick="login.showModal()">Open Login</button>
🎨 Styling Example
dialog { padding: 20px; border: none; border-radius: 10px; }
⚖️ <dialog> vs Old Alerts
| Feature | <dialog> |
alert() |
|---|---|---|
| Custom UI | ✔ | ❌ |
| Styling | ✔ | ❌ |
| Modern apps | ✔ | ❌ |
🚫 Common Mistakes
- Forgetting
showModal()❌ - Not adding close button ❌
- Using it without JavaScript ❌
🧪 Mini Exercise
Create a page with:
- A button to open a dialog
- A dialog with a message
- A close button inside dialog
- Style the dialog box