HTMLDialogElement：showModal() 方法

基线 2022

新可用

自 2022 年 3 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中无法使用。

showModal() 方法是 HTMLDialogElement 接口的方法，用于将对话框显示为模态对话框，覆盖任何其他可能存在的对话框。它显示在顶层，以及 ::backdrop 伪元素。对话框外部的交互会被阻止，并且外部内容会被呈现为惰性状态。

语法

showModal()

异常

InvalidStateError DOMException: 如果对话框已打开（即如果 open 属性已在 <dialog> 元素上设置），或者如果对话框也是一个正在显示的弹出窗口，则会抛出此异常。

以下示例显示了一个按钮，当单击该按钮时，会通过 HTMLDialogElement.showModal() 函数打开一个包含表单的模态 <dialog>。打开后，模态对话框内容以外的所有内容都处于惰性状态。从那里，您可以单击“取消”按钮关闭对话框（通过 HTMLDialogElement.close() 函数），或通过提交按钮提交表单。选择取消按钮会关闭对话框，创建一个 close 事件，而不是 cancel 事件。

HTML

html

<!-- pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </p>
    <div>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </div>
  </form>
</dialog>

<div>
  <button id="updateDetails">Update details</button>
</div>

JavaScript

const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";

function openCheck(dialog) {
  if (dialog.open) {
    console.log("Dialog open");
  } else {
    console.log("Dialog closed");
  }
}

// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

// Form cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
  dialog.close("animalNotChosen");
  openCheck(dialog);
});

结果

规范

规范
HTML 标准 # dom-dialog-showmodal-dev

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

实现此接口的 HTML 元素：<dialog>。