<dialog>
The dialog element represents a modal or non-modal dialog box or interactive overlay.
Syntax
<dialog>...</dialog>Examples
<dialog id="confirm">
<form method="dialog">
<p>Delete this item?</p>
<button value="cancel">Cancel</button>
<button value="ok">OK</button>
</form>
</dialog>
<script>
document.getElementById('confirm').showModal();
</script>
Output
Renders a centered modal with a backdrop that traps focus and closes on a form button or Escape.
Notes
showModal() makes it modal with focus trapping and the ::backdrop pseudo-element; show() is non-modal. A form with method="dialog" closes it and sets returnValue. Escape closes modal dialogs by default.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 37 |
| firefox | 98 |
| safari | 15.4 |
| edge | 79 |