このページはHTMLタグ辞書のサンプルページです。 “dialog”要素の使い方について解説するためのサンプルページです。
<p><button type="button" id="dialogopen">開く</button></p> <p><output id="result"></output></p> <dialog id="sampledialog" open> <form method="dialog" id="agreement"> <p> 猫は尊い。 </p> <p> <button type="submit" value="同意しない">同意しない</button> <button type="submit" value="同意する" autofocus>同意する</button> </p> </form> </dialog> <script> var dialogopen = document.getElementById('dialogopen'); var sampledialog = document.getElementById('sampledialog'); var outputBox = document.getElementById('result'); var selected = document.getElementById('agreement'); dialogopen.addEventListener('click', function onOpen() { if (typeof sampledialog.show === "function") { sampledialog.show(); } else { alert("Error"); } }); sampledialog.addEventListener('close', function onClose() { outputBox.value = sampledialog.returnValue + "を選択しました。"; }); </script>
開く
猫は尊い。
同意しない 同意する