<dialog>: The Dialog element

Attributes

This element includes the global attributes.

closedby

Specifies the types of user actions that can be used to close the <dialog> element. This attribute distinguishes three methods by which a dialog might be closed:

• A light dismiss user action, in which the <dialog> is closed when the user clicks or taps outside it. This is equivalent to the "light dismiss" behavior of "auto" state popovers.
• A platform-specific user action, such as pressing the Esc key on desktop platforms, or a "back" or "dismiss" gesture on mobile platforms.
• A developer-specified mechanism such as a <button> with a click handler that invokes HTMLDialogElement.close() or a <form> submission.

Possible values are:

any

The dialog can be dismissed using any of the three methods.

closerequest

The dialog can be dismissed with a platform-specific user action or a developer-specified mechanism.

none

The dialog can only be dismissed with a developer-specified mechanism.

If the <dialog> element does not have a valid closedby value specified, then

• if it was opened using showModal(), it behaves as if the value was "closerequest"
• otherwise, it behaves as if the value was "none".

open

Indicates that the dialog box is active and is available for interaction. If the open attribute is not set, the dialog box will not be visible to the user. It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it is non-modal.

Note: While you can toggle between the open and closed states of non-modal dialog boxes by toggling the presence of the open attribute, this approach is not recommended. See open for more information.

Description

The HTML <dialog> element is used to create both modal and non-modal dialog boxes. Modal dialog boxes block interaction with other UI elements, making the rest of the page inert, while non-modal dialog boxes allow interaction with the rest of the page.

Controlling dialogs using JavaScript

JavaScript can be used to display and close the <dialog> element. You can use the showModal() method to display a modal dialog and the show() method to display a non-modal dialog. The dialog box can be closed using the close() method or using the dialog method when submitting a <form> that is nested within the <dialog> element. Modal dialogs can also be closed by pressing the Esc key.

Modal dialogs using invoker commands

Modal dialogs can be declaratively opened and closed using the Invoker Commands API HTML attributes commandfor and command, which can be set on <button> elements.

The command attribute sets the particular command that is to be sent when the <button> element is clicked, while commandfor sets the id of the target dialog. The commands that can be sent for dialogs are "show-modal", "close", and "request-close".

The HTML below demonstrates how to apply the attributes to a <button> element so it can be pressed to open a modal <dialog> with an id of "my-dialog".

<button command="show-modal" commandfor="my-dialog">Open dialog</button>

<dialog id="my-dialog">
  <p>This dialog was opened using an invoker command.</p>
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

Non-modal dialogs using popover commands

Non-modal dialogs can be declaratively opened, closed, and toggled using the Popover API HTML attributes popovertarget and popovertargetaction, which can be defined on <button> and <input> elements.

The <dialog> must be turned into a popover by adding the popover attribute. You can then use popovertarget on a button/input to indicate the target popover, and popovertargetaction to specify the action to occur on the popover when the button is clicked. Note that, because the dialog is a popover, it will be non-modal, so you can close it by clicking outside the dialog.

The HTML below shows how to apply the attributes to a <button> element so it can be pressed to show and hide a modal <dialog> with an id of "my-dialog".

<button popovertarget="my-dialog">Open dialog</button>

<dialog id="my-dialog" popover>
  <p>This dialog was opened using a popovertargetaction attribute.</p>
  <button popovertarget="my-dialog" popovertargetaction="hide">Close</button>
</dialog>

The Popover API also provides properties that can be used to get and set the state in JavaScript.

Closing dialogs

It is important to provide a closing mechanism for every <dialog> element, and to ensure that this works on devices that might not have a physical keyboard.

There are numerous ways to close a dialog:

• Submitting the form within the <dialog> element with method="dialog" set on the <form> element (see the Using the dialog open attribute example).
• Clicking outside the dialog area when "light dismiss" is enabled (see the Popover API HTML attributes example).
• Pressing the Esc key, in dialogs where it is enabled (see the Popover API HTML attributes example).
• Calling the HTMLDialogElement.close() method (see the modal example).

CSS Styling

A <dialog> can be selected using its element name (like any other element), and you can also match its state using pseudo-classes such as :modal and :open.

The CSS ::backdrop pseudo-element can be used to style the backdrop of a modal dialog, which is displayed behind the <dialog> element when the dialog is displayed using the HTMLDialogElement.showModal() method. This pseudo-element could be used, for example, to blur, darken, or otherwise obfuscate the inert content behind the modal dialog.

Additional notes

• HTML <form> elements can be used to close a dialog box if they have the attribute method="dialog" or if the button used to submit the form has formmethod="dialog" set. When a <form> within a <dialog> is submitted via the dialog method, the dialog box closes, the states of the form controls are saved but not submitted, and the returnValue property gets set to the value of the button that was activated.
• The autofocus attribute should be added to the element the user is expected to interact with immediately upon opening a modal dialog. If no other element involves more immediate interaction, it is recommended to add autofocus to the close button inside the dialog, or the dialog itself if the user is expected to click/activate it to dismiss.
• Do not add the tabindex property to the <dialog> element as it is not interactive and does not receive focus. The dialog's contents, including the close button contained in the dialog, can receive focus and be interactive.

Accessibility

When implementing a dialog, it is important to consider the most appropriate place to set user focus. When using HTMLDialogElement.showModal() to open a <dialog>, focus is set on the first nested focusable element. Explicitly indicating the initial focus placement by using the autofocus attribute will help ensure initial focus is set on the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog's content is dynamically rendered when invoked, the <dialog> element itself may provide the best initial focus placement.

Ensure a mechanism is provided to allow users to close the dialog. The most robust way to ensure that all users can close the dialog is to include an explicit button to do so, such as a confirmation, cancellation, or close button.

By default, a dialog invoked by the showModal() method can be dismissed by pressing the Esc key. A non-modal dialog does not dismiss via the Esc key by default, and depending on what the non-modal dialog represents, it may not be desired for this behavior. Keyboard users expect the Esc key to close modal dialogs; ensure that this behavior is implemented and maintained. If multiple modal dialogs are open, pressing the Esc key should close only the last shown dialog. When using <dialog>, this behavior is provided by the browser.

While dialogs can be created using other elements, the native <dialog> element provides usability and accessibility features that must be replicated if you use other elements for a similar purpose. If you're creating a custom dialog implementation, ensure that all expected default behaviors are supported and proper labeling recommendations are followed.

The <dialog> element is exposed by browsers in a manner similar to custom dialogs that use the ARIA role="dialog" attribute. <dialog> elements invoked by the showModal() method implicitly have aria-modal="true", whereas <dialog> elements invoked by the show() method or displayed using the open attribute or by changing the default display of a <dialog> are exposed as [aria-modal="false"]. When implementing modal dialogs, everything other than the <dialog> and its contents should be rendered inert using the inert attribute. When using <dialog> along with the HTMLDialogElement.showModal() method, this behavior is provided by the browser.

Examples

Invoker Command API HTML attributes

This example demonstrates how you can use open and close a modal dialog using the commandfor and command HTML attributes of the Invoker Commands API.

First, we declare a <button> element, setting the command attribute to "show-modal", and the commandfor attribute to the id of the dialog to open (my-dialog). Then we declare a <dialog> element that contains a "Close" <button>. This button sends the "close" command to the (same) dialog id.

<button command="show-modal" commandfor="my-dialog">Open dialog</button>

<dialog id="my-dialog">
  <p>This dialog was opened using an invoker command.</p>
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

Result

Open the dialog by pressing the "Open dialog" button. You can close the dialog by selecting the "Close" button or pressing the Esc key.

Popover API HTML attributes

This example demonstrates how you can open and close a non-modal dialog using the popover, popovertarget, and popovertargetaction HTML attributes of the Popover API.

The <dialog> is turned into a popover by adding the popover attribute. Since we haven't specified a value for the attribute, the default value of "auto" is used. This enables "light dismiss" behavior, allowing the dialog to be closed by clicking outside the dialog or by pressing Esc. We could instead have set popover="manual" to disable "light dismiss" behavior, in which case the dialog would have to be closed using the "Close" button.

Note that we haven't specified the popovertargetaction attribute for the <button> that opens the dialog. It isn't needed in this case, because its default value is toggle, which will toggle the dialog between its open and closed states when the button is clicked.

<button popovertarget="my-dialog">Open dialog</button>

<dialog id="my-dialog" popover>
  <p>This dialog was opened using a popovertargetaction attribute.</p>
  <button popovertarget="my-dialog" popovertargetaction="hide">Close</button>
</dialog>

Result

Open the dialog by pressing the "Open dialog" button. You can close the dialog by selecting the "Close" button or pressing the Esc key. You can also close it by selecting outside the dialog, as it is non-modal.

Using the dialog open attribute

This example demonstrates how you can set the boolean open attribute on a <dialog> element, in order to create an HTML-only non-modal dialog that is already open when the page loads.

The dialog can be closed by clicking the "OK" button because the method attribute in the <form> element is set to "dialog". In this case, no JavaScript is needed to close the form.

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Result

This dialog is initially open and non-modal because of the presence of the open attribute. After clicking "OK", the dialog gets dismissed, leaving the Result frame empty.

When the dialog is dismissed, there is no method provided to reopen it. The preferred method to display non-modal dialogs is to use the HTMLDialogElement.show() method. It is possible to toggle the display of the dialog by adding or removing the boolean open attribute, but this is not the recommended practice.

Creating a modal dialog

This example demonstrates a modal dialog with a gradient backdrop. The .showModal() method opens the modal dialog when the "Show the dialog" button is activated. The dialog can be closed by pressing the Esc key or via the close() method when the "Close" button within the dialog is activated.

When a dialog opens, the browser, by default, gives focus to the first element that can be focused within the dialog. In this example, the autofocus attribute is applied to the "Close" button, giving it focus when the dialog opens, as this is the element we expect the user will interact with immediately after the dialog opens.

HTML

<dialog>
  <button autofocus>Close</button>
  <p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button>Show the dialog</button>

CSS

We can style the backdrop of the dialog by using the ::backdrop pseudo-element.

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

JavaScript

The dialog is opened modally using the .showModal() method and closed using the .close() or .requestClose() methods.

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

Result

When the modal dialog is displayed, it appears above any other dialogs that might be present. Everything outside the modal dialog is inert and interactions outside the dialog are blocked. Notice that when the dialog is open, with the exception of the dialog itself, interaction with the document is not possible; the "Show the dialog" button is mostly obfuscated by the almost opaque backdrop of the dialog and is inert.

Handling the return value from the dialog

This example demonstrates the returnValue of the <dialog> element and how to close a modal dialog by using a form. By default, the returnValue is the empty string or the value of the button that submits the form within the <dialog> element, if there is one.

This example opens a modal dialog when the "Show the dialog" button is activated. The dialog contains a form with a <select> and two <button> elements, which default to type="submit". An event listener updates the value of the "Confirm" button when the select option changes. If the "Confirm" button is activated to close the dialog, the current value of the button is the return value. If the dialog is closed by pressing the "Cancel" button, the returnValue is cancel.

When the dialog is closed, the return value is displayed under the "Show the dialog" button. If the dialog is closed by pressing the Esc key, the returnValue is not updated, and the close event doesn't occur, so the text in the <output> is not updated.

HTML

<!-- A modal dialog containing a form -->
<dialog id="favDialog">
  <form>
    <p>
      <label>
        Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">Show the dialog</button>
</p>
<output></output>

JavaScript

The dialog is opened using using an event listener on the "Show the dialog" button, which calls HTMLDialogElement.showModal() when the button is clicked.

The dialog is closed when the "Cancel" button is clicked, because the <button> includes the formmethod="dialog" attribute. When a form's method is dialog, the state of the form is saved but not submitted, and the dialog gets closed (the attribute overrides the <form>'s default GET method). Without an action, submitting the form via the default GET method causes a page to reload. We use JavaScript to prevent the submission and close the dialog with the event.preventDefault() and HTMLDialogElement.close() methods, respectively.

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener("click", () => {
  favDialog.showModal();
});

// "Cancel" button closes the dialog without submitting because of [formmethod="dialog"], triggering a close event.
favDialog.addEventListener("close", (e) => {
  outputBox.value =
    favDialog.returnValue === "default"
      ? "No return value."
      : `ReturnValue: ${favDialog.returnValue}.`; // Have to check for "default" rather than empty string
});

// Prevent the "confirm" button from the default behavior of submitting the form, and close the dialog with the `close()` method, which triggers the "close" event.
confirmBtn.addEventListener("click", (event) => {
  event.preventDefault(); // We don't want to submit this fake form
  favDialog.close(selectEl.value); // Have to send the select box value here.
});

Result

Closing a dialog with a required form input

When a form inside a dialog has a required input, the user agent will only let you close the dialog once you provide a value for the required input. To close such dialog, either use the formnovalidate attribute on the close button or call the close() method on the dialog object when the close button is clicked.

<dialog id="dialog">
  <form method="dialog">
    <p>
      <label>
        Favorite animal:
        <input type="text" required />
      </label>
    </p>
    <div>
      <input type="submit" id="normal-close" value="Normal close" />
      <input
        type="submit"
        id="novalidate-close"
        value="Novalidate close"
        formnovalidate />
      <input type="submit" id="js-close" value="JS close" />
    </div>
  </form>
</dialog>
<p>
  <button id="show-dialog">Show the dialog</button>
</p>
<output></output>

[type="submit"] {
  margin-right: 1rem;
}

JavaScript

const showBtn = document.getElementById("show-dialog");
const dialog = document.getElementById("dialog");
const jsCloseBtn = dialog.querySelector("#js-close");

showBtn.addEventListener("click", () => {
  dialog.showModal();
});

jsCloseBtn.addEventListener("click", (e) => {
  e.preventDefault();
  dialog.close();
});

Result

From the output, we see it is impossible to close the dialog using the Normal close button. But the dialog can be closed if we bypass the form validation using the formnovalidate attribute on the Cancel button. Programmatically, dialog.close() will also close such dialog.

Comparison of different closedby behaviors

This example demonstrates the difference in behavior between different values of the closedby attribute.

HTML

We provide three <button> elements and three <dialog> elements. Each button will be programmed to open a different dialog that demonstrates the behavior of one of the three values of the closedby attribute — none, closerequest, and any. Note that each <dialog> element contains a <button> element that will be used to close it.

<p>Choose a <code>&lt;dialog&gt;</code> type to show:</p>
<div id="controls">
  <button id="none-btn"><code>closedby="none"</code></button>
  <button id="closerequest-btn">
    <code>closedby="closerequest"</code>
  </button>
  <button id="any-btn"><code>closedby="any"</code></button>
</div>

<dialog closedby="none">
  <h2><code>closedby="none"</code></h2>
  <p>
    Only closable using a specific provided mechanism, which in this case is
    pressing the "Close" button below.
  </p>
  <button class="close">Close</button>
</dialog>

<dialog closedby="closerequest">
  <h2><code>closedby="closerequest"</code></h2>
  <p>Closable using the "Close" button or the Esc key.</p>
  <button class="close">Close</button>
</dialog>

<dialog closedby="any">
  <h2><code>closedby="any"</code></h2>
  <p>
    Closable using the "Close" button, the Esc key, or by clicking outside the
    dialog. "Light dismiss" behavior.
  </p>
  <button class="close">Close</button>
</dialog>

body {
  font-family: sans-serif;
}

#controls {
  display: flex;
  justify-content: space-around;
}

dialog {
  width: 480px;
  border-radius: 5px;
  border-color: rgb(0 0 0 / 0.3);
}

dialog h2 {
  margin: 0;
}

dialog p {
  line-height: 1.4;
}

JavaScript

Here we assign different variables to reference the main control <button> elements, the <dialog> elements, and the "Close" <button> elements inside the dialogs. First we assign a click event listener to each control button using addEventListener, the event handler function of which opens the associated <dialog> element via showModal(). We then loop through the "Close" <button> references, assigning each one a click event handler function that closes its <dialog> element via close().

const noneBtn = document.getElementById("none-btn");
const closerequestBtn = document.getElementById("closerequest-btn");
const anyBtn = document.getElementById("any-btn");

const noneDialog = document.querySelector("[closedby='none']");
const closerequestDialog = document.querySelector("[closedby='closerequest']");
const anyDialog = document.querySelector("[closedby='any']");

const closeBtns = document.querySelectorAll(".close");

noneBtn.addEventListener("click", () => {
  noneDialog.showModal();
});

closerequestBtn.addEventListener("click", () => {
  closerequestDialog.showModal();
});

anyBtn.addEventListener("click", () => {
  anyDialog.showModal();
});

closeBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.parentElement.close();
  });
});

Result

The rendered result is as follows:

Try clicking each button to open a dialog. The first one can only be closed by clicking its "Close" button. The second one can also be closed via a device-specific user action such as pressing the Esc key. The third one has full "light-dismiss" behavior, so it can also be closed by clicking or tapping outside the dialog.

Animating dialogs

<dialog>s are set to display: none; when hidden and display: block; when shown, as well as being removed from / added to the top layer and the accessibility tree. Therefore, for <dialog> elements to be animated the display property needs to be animatable. Supporting browsers animate display with a variation on the discrete animation type. Specifically, the browser will flip between none and another value of display so that the animated content is shown for the entire animation duration.

So for example:

• When animating display from none to block (or another visible display value), the value will flip to block at 0% of the animation duration so it is visible throughout.
• When animating display from block (or another visible display value) to none, the value will flip to none at 100% of the animation duration so it is visible throughout.

Transitioning dialog elements

When animating <dialog>s with CSS transitions, the following features are required:

@starting-style at-rule

Provides a set of starting values for properties set on the <dialog> that you want to transition from every time it is opened. This is needed to avoid unexpected behavior. By default, CSS transitions only occur when a property changes from one value to another on a visible element; they are not triggered on elements' first style updates, or when the display type changes from none to another type.

display property

Add display to the transitions list so that the <dialog> will remain as display: block (or another visible display value set on the dialog's open state) for the duration of the transition, ensuring the other transitions are visible.

overlay property

Include overlay in the transitions list to ensure the removal of the <dialog> from the top layer is deferred until the transition completes, again ensuring the transition is visible.

transition-behavior property

Set transition-behavior: allow-discrete on the display and overlay transitions (or on the transition shorthand) to enable discrete transitions on these two properties that are not by default animatable.

Here is a quick example to show what this might look like.

HTML

The HTML contains a <dialog> element, plus a button to show the dialog. Additionally, the <dialog> element contains another button to close itself.

<dialog id="dialog">
  Content here
  <button class="close">close</button>
</dialog>

<button class="show">Show Modal</button>

CSS

In the CSS, we include a @starting-style block that defines the transition starting styles for the opacity and transform properties, transition end styles on the dialog:open state, and default styles on the default dialog state to transition back to once the <dialog> has appeared. Note how the <dialog>'s transition list includes not only these properties, but also the display and overlay properties, each with allow-discrete set on them.

We also set a starting style value for the background-color property on the ::backdrop that appears behind the <dialog> when it opens, to provide a nice darkening animation. The dialog:open::backdrop selector selects only the backdrops of <dialog> elements when the dialog is open.

/* Open state of the dialog  */
dialog:open {
  opacity: 1;
  transform: scaleY(1);
}

/* Closed state of the dialog   */
dialog {
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out,
    overlay 0.7s ease-out allow-discrete,
    display 0.7s ease-out allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/* Before open state  */
/* Needs to be after the previous dialog:open rule to take effect,
    as the specificity is the same */
@starting-style {
  dialog:open {
    opacity: 0;
    transform: scaleY(0);
  }
}

/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
  background-color: transparent;
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

dialog:open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */

@starting-style {
  dialog:open::backdrop {
    background-color: transparent;
  }
}

JavaScript

The JavaScript adds event handlers to the show and close buttons causing them to show and close the <dialog> when they are clicked:

const dialogElem = document.getElementById("dialog");
const showBtn = document.querySelector(".show");
const closeBtn = document.querySelector(".close");

showBtn.addEventListener("click", () => {
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  dialogElem.close();
});

Result

The code renders as follows:

dialog keyframe animations

When animating a <dialog> with CSS keyframe animations, there are some differences to note from transitions:

• You don't provide a @starting-style.
• You include the display value in a keyframe; this will be the display value for the entirety of the animation, or until another non-none display value is encountered.
• You don't need to explicitly enable discrete animations; there is no equivalent to allow-discrete inside keyframes.
• You don't need to set overlay inside keyframes either; the display animation handles the animation of the <dialog> from shown to hidden.

Let's have a look at an example so you can see what this looks like.

HTML

First, the HTML contains a <dialog> element, plus a button to show the dialog. Additionally, the <dialog> element contains another button to close itself.

<dialog id="dialog">
  Content here
  <button class="close">close</button>
</dialog>

<button class="show">Show Modal</button>

CSS

The CSS defines keyframes to animate between the closed and shown states of the <dialog>, plus the fade-in animation for the <dialog>'s backdrop. The <dialog> animations include animating display to make sure the actual visible animation effects remain visible for the whole duration. Note that it wasn't possible to animate the backdrop fade out — the backdrop is immediately removed from the DOM when the <dialog> is closed, so there is nothing to animate.

dialog {
  animation: fade-out 0.7s ease-out;
}

dialog:open {
  animation: fade-in 0.7s ease-out;
}

dialog:open::backdrop {
  background-color: black;
  animation: backdrop-fade-in 0.7s ease-out forwards;
}

/* Animation keyframes */

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scaleY(0);
    display: none;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }

  100% {
    opacity: 0;
    transform: scaleY(0);
    display: none;
  }
}

@keyframes backdrop-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.25;
  }
}

body,
button {
  font-family: system-ui;
}

JavaScript

Finally, the JavaScript adds event handlers to the buttons to enable showing and closing the <dialog>:

const dialogElem = document.getElementById("dialog");
const showBtn = document.querySelector(".show");
const closeBtn = document.querySelector(".close");

showBtn.addEventListener("click", () => {
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  dialogElem.close();
});

Result

The code renders as follows:

Technical summary

Specifications

Browser compatibility

See also

• HTMLDialogElement interface
• close event of the HTMLDialogElement interface
• cancel event of the HTMLDialogElement interface
• open property of the HTMLDialogElement interface
• inert global attribute for HTML elements
• ::backdrop CSS pseudo-element
• Web forms in the Learn area