GeezerVison is showing developer.mozilla.org — HTMLDialogElement: show() method - Web APIs | MDN
HTMLDialogElement: show() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
The show() method of the HTMLDialogElement interface displays the dialog as a non-modal dialog.
A non-modal dialog is one where users can interact with content outside/behind the open dialog.
The following example shows a simple button that, when clicked, opens a <dialog> using the show() method.
When the dialog is open, you can still interact with the rest of the page, including clicking the Click me button that triggers an alert.
You can click the Close dialog button to close the dialog (via the close() method).
HTML
html
<dialog id="dialog">
<button type="button" id="close">Close dialog</button>
</dialog>
<p><button id="open">Open dialog</button></p>
<p><button id="alert">Trigger alert</button></p>
JavaScript
js
const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
const alertButton = document.getElementById("alert");
// Open button opens a modeless dialog
openButton.addEventListener("click", () => {
dialog.show();
});
// Alert button triggers an alert
alertButton.addEventListener("click", () => {
alert("you clicked me!");
});
// Close button closes the dialog box
closeButton.addEventListener("click", () => {
dialog.close();
});
Result