HTMLDialogElement: close() メソッド
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月.
close() は HTMLDialogElement インターフェイスのメソッドで、このダイアログ (<dialog>) を閉じます。 引数としてオプションの文字列を渡すことができ、このダイアログの returnValue を更新します。
構文
js
close() close(returnValue) 引数
returnValue省略可-
文字列で、このダイアログの
HTMLDialogElement.returnValueを更新する値を表します。
返値
なし (undefined)。
例
次の例は単純なボタンですが、クリックするとフォームを含む <dialog> を showModal() メソッドで開きます。 そこから X ボタンをクリックしてダイアログを閉じたり（ HTMLDialogElement.close() メソッドで）、submit ボタンでフォームを送信したりすることができます。
html
<!-- フォームを含む単純なポップアップダイアログボックス --> <dialog id="favDialog"> <form method="dialog"> <button id="close" aria-label="close" formnovalidate>X</button> <section> <p> <label for="favAnimal">好きな動物:</label> <select id="favAnimal" 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 id="updateDetails">詳細を更新</button> </menu> js
const updateButton = document.getElementById("updateDetails"); const closeButton = document.getElementById("close"); 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.showModal(); openCheck(dialog); }); // フォームの閉じるボタンでダイアログボックスを閉じる closeButton.addEventListener("click", () => { dialog.close("animalNotChosen"); openCheck(dialog); }); [X] ボタンが type="submit" であったなら、JavaScript を必要とせずにダイアログが閉じられたはずです。 フォームを送信すると、フォームのメソッドが dialog であれば、それが入った <dialog> を閉じるので、「閉じる」ボタンは必要ありません。
結果
仕様書
| Specification |
|---|
| HTML # dom-dialog-close-dev |
ブラウザーの互換性
関連情報
- このインターフェイスを実装している HTML 要素:
<dialog>