Syntax

showModal()

Parameters

None.

Return value

None (undefined).

Exceptions

InvalidStateError DOMException: Thrown if the dialog is already open and non-modal (i.e., if the dialog has already been opened with HTMLDialogElement.show()).

Examples

Basic usage

The following example shows a simple button that, when clicked, opens a <dialog> using the showModal() method.

When the dialog is open, you cannot interact with the rest of the page, including clicking the Click me button that would otherwise trigger an alert.

You can click the Close dialog button to close the dialog (via the HTMLDialogElement.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

const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
const alertButton = document.getElementById("alert");
// Open button opens a modal dialog
openButton.addEventListener("click", () => {
  dialog.showModal();
});
// Alert button triggers an alert
alertButton.addEventListener("click", () => {
  alert("you clicked me!");
});
// Close button closes the dialog box
closeButton.addEventListener("click", () => {
  dialog.close();
});

Result

Specifications

Specification
HTML # dom-dialog-showmodal-dev

Browser compatibility

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on Jan 26, 2026 by MDN contributors.