HTMLDialogElement: show() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年3月.

show() はHTMLDialogElement インターフェイスのメソッドで、ダイアログをモードレスに表示します。すなわち、ダイアログの外側のコンテンツも操作できる状態にします。

構文

show()

引数

なし。

返値

なし (undefined)。

例外

InvalidStateErrorDOMException: ダイアログが既に開いておりモーダルである場合（つまり、すでにHTMLDialogElement.showModal() で開かれている場合）、例外が発生します。

例

次の例は単純なボタンで、クリックするとフォームを含むダイアログ (<dialog>) をshow() メソッドで開きます。ここから、Cancel ボタンをクリックしてダイアログを閉じたり（HTMLDialogElement.close() メソッドで）、submit ボタンでフォームを送信したりすることができます。

html

<!-- フォームを含む単純なポップアップダイアログボックス --><dialog>  <form method="dialog">    <section>      <p>        <label for="favAnimal">好きな動物:</label>        <select name="favAnimal">          <option></option>          <option>ブラインシュリンプ</option>          <option>レッサーパンダ</option>          <option>クモザル</option>        </select>      </p>    </section>    <menu>      <button type="reset">キャンセル</button>      <button type="submit">確認</button>    </menu>  </form></dialog><menu>  <button>詳細を更新</button></menu>

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");  }}// 更新ボタンでモーダルダイアログを開くupdateButton.addEventListener("click", () => {  dialog.show();  openCheck(dialog);});// フォームのキャンセルボタンでダイアログボックスを閉じるcancelButton.addEventListener("click", () => {  dialog.close("animalNotChosen");  openCheck(dialog);});