このページはHTMLタグ辞書のサンプルページです。
“dialog”要素の使い方について解説するためのサンプルページです。
<p><button type="button" id="dialogopen">開く</button></p>
<p><output id="result"></output></p>
<dialog id="sampledialog">
<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.showModal === "function") {
sampledialog.showModal();
} else {
alert("Error");
}
});
sampledialog.addEventListener('close', function onClose() {
outputBox.value = sampledialog.returnValue + "を選択しました。";
});
</script>
