<dialog>～</dialog><dialog> はダイアログを表示します。JavaScript でダイアログの表示・クローズを制御することが可能です。show() は通常モードでダイアログを表示します。showModal() はモーダル状態(ダイアログ以外の操作が禁止される)でダイアログを開きます。close() はダイアログを閉じます。close() の引数は、ダイアログの onclose イベントハンドラの this.returnValue で参照することができます。
HTML Living Standard、HTML 5.2 で追加され、Chrome 37、Opera 24 以降でサポートされています。
<input type="button" value="Show" onclick="document.getElementById('dg1').show()">
<input type="button" value="ShowModal" onclick="document.getElementById('dg1').showModal()">
<dialog id="dg1">
<p>Hello!</p>
<input type="button" value="Close" onclick="document.getElementById('dg1').close()">
</dialog>
ダイアログに入力した値を受け取るには、下記の様に close() の引数で値を渡し、これを e.target.returnValue で受け取ります。
<script>
window.addEventListener('load', function() {
var dialog2 = document.getElementById('dialog2');
var open2 = document.getElementById('open2');
var text2 = document.getElementById('text2');
var close2 = document.getElementById('close2');
open2.addEventListener('click', () => {
dialog2.showModal();
});
close2.addEventListener('click', () => {
dialog2.close(text2.value);
});
dialog2.addEventListener('close', (e) => {
alert(e.target.returnValue);
});
});
</script>
<input type="button" id="open2" value="Open">
<dialog id="dialog2">
<input type="text" id="text2" value="Hello">
<input type="button" id="close2" value="Close">
</dialog>
2025年3月の Chrome 134 で closedby 属性がサポートされました。
<dialog id="dlg-any" closedby="any"> <p>Any dialog</p> <button class="close3">Close</button> </dialog> <dialog id="dlg-closerequest" closedby="closerequest"> <p>CloseRequest Dialog</p> <button class="close3">Close</button> </dialog> <dialog id="dlg-none" closedby="none"> <p>None Dialog</p> <button class="close3">Close</button> </dialog> <button type="button" class="btn3" data-target="dlg-any">any</button> <button type="button" class="btn3" data-target="dlg-closerequest">closerequest</button> <button type="button" class="btn3" data-target="dlg-none">none</button>
document.querySelectorAll(".btn3").forEach((e) => {
e.addEventListener("click", (e) => {
document.getElementById(e.target.getAttribute("data-target")).showModal();
});
});
document.querySelectorAll(".close3").forEach((e) => {
e.addEventListener("click", (e) => {
console.log(e.target.parentElement);
e.target.parentElement.close();
});
});