このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
HTMLDialogElement: showModal() メソッド
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月.
showModal() はHTMLDialogElement インターフェイスのメソッドで、ダイアログをモーダルに、見えるように他のダイアログの最も上に表示します。これは最上位レイヤー の中に::backdrop 擬似要素とともに表示されます。ダイアログおよびその子要素を除く、ダイアログと同じ文書内の要素は不活性状態となります（inert 属性が指定された場合と同様）。ブロック状態になるのは包含文書のみです。ダイアログが iframe 内でレンダリングされている場合、ページの残りの部分は操作可能な状態を維持します。
構文
showModal()引数
なし。
返値
なし (undefined)。
例外
InvalidStateErrorDOMExceptionダイアログが既に開いており、モーダルでない場合（つまり、すでに
HTMLDialogElement.show()で開かれている場合）に発生します。
例
モーダルダイアログを開く
次の例は、クリックするとフォームを含むモーダル<dialog> をHTMLDialogElement.showModal() 関数で開くボタンを示しています。開いている間、モーダルダイアログのコンテンツ以外は不活性になります。ここから、Cancel ボタンをクリックしてダイアログを閉じたり（HTMLDialogElement.close() 関数で）、submit ボタンによってフォームを送信したりすることができます。キャンセルボタンを選択するとダイアログが閉じられ、close イベントが作成されますが、cancel イベントは作成されません。
HTML
<!-- pop-up dialog box, containing a form --><dialog> <form method="dialog"> <p> <label for="favAnimal">Favorite animal:</label> <select name="favAnimal"> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select> </p> <div> <button type="reset">Cancel</button> <button type="submit">Confirm</button> </div> </form></dialog><div> <button>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 dialogupdateButton.addEventListener("click", () => { dialog.showModal(); openCheck(dialog);});// Form cancel button closes the dialog boxcancelButton.addEventListener("click", () => { dialog.close("animalNotChosen"); openCheck(dialog);});結果
仕様書
| Specification |
|---|
| HTML # dom-dialog-showmodal-dev |
ブラウザーの互換性
関連情報
- このインターフェイスを実装している HTML 要素:
<dialog>