HTMLDialogElement: close() メソッド

close() close(returnValue)

<!-- フォームを含む単純なポップアップダイアログボックス --> <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>

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