The Dialog Element
The <dialog> element represents a dialog box or other interactive subwindow. It can be shown non-modally with show() or modally with showModal() through JavaScript. The open attribute indicates that a dialog is currently open.
Dialog Markup
<dialog id="settingsDialog">\n <h2>Settings</h2>\n <p>Configure your preferences.</p>\n <form method="dialog">\n <button>Close</button>\n </form>\n</dialog>\n\n<button onclick="settingsDialog.showModal()">Open Settings</button>💡 The dialog can provide a native modal experience and the method=dialog form can close it.
Key Takeaways
- dialog provides native semantics for dialogs.
- showModal() opens a modal dialog.
Knowledge Check
Which method opens a dialog as a modal?