<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() の引数と this.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', () => {
alert(this.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>