<dialog>
<dialog>要素は、ダイアログを作成します。
デモ：<dialog> 要素
*IE, Edge, Safari は非対応
属性
open
ダイアログを開いた状態にしておくことができます。論理属性です。
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
例① 開いた状態のダイアログ
HTML
<dialog id="dialog" open>
<p>Hello World</p>
</dialog>実行結果
例② 開閉ボタンを付けたダイアログ（JavaScript で実装）
デモ
Chrome と Opera のみ対応
JavaScript API に用意されている show メソッドと close メソッドを使って、ダイアログの表示・非表示を切り替えます。
<dialog id="dialog">
<p>Hello World</p>
</dialog>
<button onclick="openDialog()">開く</button>
<button onclick="closeDialog()">閉じる</button>
<script type="text/javascript">
var dialog = document.getElementById('dialog');
function openDialog() {
dialog.show();
}
function closeDialog() {
dialog.close();
}
</script>
Chrome, Opera, Firefox に対応
「開く」ボタンを押したときに open 属性を付与、「閉じる」ボタンを押したときに open 属性を外すことでダイアログの表示・非表示を切り替えます。
<dialog id="dialog">
<p>Hello World</p>
</dialog>
<button onclick="openDialog()">開く</button>
<button onclick="closeDialog()">閉じる</button>
<script type="text/javascript">
var dialog = document.getElementById('dialog');
function openDialog() {
dialog.setAttribute('open','');
}
function closeDialog() {
dialog.removeAttribute('open');
}
</script>
対応ブラウザ
関連するタグ
