HTMLDialogElement: showModal() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2022年3月以降、すべてのブラウザーで利用可能です。

showModal() は HTMLDialogElement インターフェイスのメソッドで、ダイアログをモーダルに、見えるように他のダイアログの最も上に表示します。これは最上位レイヤーの中に ::backdrop 擬似要素とともに表示されます。ダイアログおよびその子要素を除く、ダイアログと同じ文書内の要素は不活性状態となります（inert 属性が指定された場合と同様）。ブロック状態になるのは包含文書のみです。ダイアログが iframe 内でレンダリングされている場合、ページの残りの部分は操作可能な状態を維持します。

構文

showModal()

引数

なし。

返値

なし (undefined)。

例外

InvalidStateError DOMException

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

例

モーダルダイアログを開く

次の例は、クリックするとフォームを含むモーダル <dialog> を HTMLDialogElement.showModal() 関数で開くボタンを示しています。開いている間、モーダルダイアログのコンテンツ以外は不活性になります。ここから、Cancel ボタンをクリックしてダイアログを閉じたり（HTMLDialogElement.close() 関数で）、submit ボタンによってフォームを送信したりすることができます。キャンセルボタンを選択するとダイアログが閉じられ、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

js
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);
});