← Modern UI
Dialog Element
Probing…Dialog Element is a web platform capability in the Modern UI category. Native modal dialogs with focus trapping and backdrop. Supported in Chromium 37+, Firefox 98+, and Safari 15.4+.
Try it
Loading demo…
Code
const dialog = document.querySelector('dialog')!
// Open as a modal: focus is trapped, the rest is inert,
// and a ::backdrop is rendered behind it.
dialog.showModal()
// Closing returns the button's value via dialog.returnValue.
dialog.addEventListener('close', () => {
console.log('closed with', dialog.returnValue)
})Browser support
Chromium
37
Firefox
98
Safari
15.4
Frequently asked questions
Which browsers support Dialog Element?
Supported in Chromium 37+, Firefox 98+, and Safari 15.4+.
Does Dialog Element require HTTPS?
No. Dialog Element works without a secure context, though serving your site over HTTPS is always recommended.
What is Dialog Element used for?
Native modal dialogs with focus trapping and backdrop.
Can I try Dialog Element in my browser?
Yes. shwcs.net runs a live Dialog Element demo that probes your current browser and lets you try the API. Everything runs locally — nothing is sent anywhere.