Sep. 27th, 2020
＃
“open”属性について
“open”属性は“dialog”要素が表すダイアログボックスを開いた状態にする属性です。
スクリプトの“showModal()”メソッド、もしくは“open()”メソッドでダイアログボックスが開かれると、“dialog”要素に“open”属性が付加され、“close()”メソッドや“method="dialog"”属性が指定された“form”要素の送信ボタンによってダイアログボックスが閉じられると“open”属性が取り除かれます。
“open”属性を最初から指定している場合はダイアログボックスは最初から開かれた状態となります。
＃
＃
サンプルコード
属性値を省略する
<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>
属性値を省略しない
<p><button type="button" id="dialogopen">開く</button></p>
<p><output id="result"></output></p>
<dialog id="sampledialog" open="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>
