HTML dialog要素の使い方

2023/07/01 (土) - 00:00　HTML JavaScript

dialog要素を使えば、ウェブページ上にポップアップウィンドウのようなダイアログを、HTMLだけで簡単に実装できます。従来はHTMLのほか、JavaScriptやCSSを駆使して実装して非常に面倒でしたが、便利になったものです。

HTMLのコード

<dialog>
<p>ダイアログが表示された！</p>
<button id="buttonCloseDialog">閉じるよ</button>
</dialog>
<p><button id="buttonShowDialog">ダイアログを開くよ</button></p>

dialog要素の表示・非表示を切り替えるJavaScriptのコード。

<script>
let dialog = document.querySelector('dialog');
let showButton = document.getElementById('buttonShowDialog');
let closeButton = document.getElementById('buttonCloseDialog');
showButton.addEventListener('click', function() {
dialog.showModal();
}, false);
closeButton.addEventListener('click', function() {
dialog.close();
}, false);
</script>

Chrome、Safari、Firefox等の最新のブラウザであれば使えるようになっているので、積極的に使ってみましょう。