HTMLだけでポップアップ！JavaScriptなしでモーダルウィンドウを実装する方法

Webサイトでよく使われている、ポップアップ（モーダルウィンドウ、ダイアログボックス）について、従来はJavaScriptライブラリを使って作成するのが一般的でしたが、現在はHTML5の要素を利用することで、シンプルに実装することができます。
先日もお客様からこんなご相談をいただきました。

お客様

サイトのお知らせでポップアップウィンドウを表示させたいのですが、やっぱりJavaScriptが必要ですよね？もっと簡単に実装できると良いのですが・・・

そこで今回は、HTML5の<dialog>タグで実装可能なポップアップ機能についてご紹介したいと思います。

<dialog>タグの基本的なコード
<dialog>タグのカスタマイズ
- 背景（バックドロップ）のスタイルを変更する
- ポップアップウィンドウの外をクリックした場合も閉じる
<dialog>タグによるアクセシビリティへの配慮
<dialog>タグのブラウザ対応状況
まとめ

<dialog>タグの基本的なコード

まず最初に、<dialog>タグを使用する際の基本的なコードは以下になります。
<form>タグにmethod=”dialog”を記述し、中の要素に<button>タグを配置することで、ポップアップウィンドウの閉じるボタンとして動作します。

<dialog>
     <form method="dialog">
          <p>ポップアップの表示例です</p>
          <button>閉じる</button>
     <form>
</dialog>

dialog {
	padding: 1.5rem;
	border: none;
	border-radius: 0.5rem;
	text-align: center;
}
button {
	padding: 0.5rem 1rem;
	border-radius: 0.4rem;
	cursor: pointer;
}

実際の表示例

お客様

HTMLの記述だけで閉じるボタンまで実装できるんですね！簡単なのに便利ですね。

なお、実際のサイトに表示する際には、ポップアップを表示させるためのトリガー、あるいはページを開いた瞬間にポップアップを表示させておきたいケースがほとんどだと思われます。以下は、それぞれの場合に必要なコードの例です。

ポップアップを表示させるボタン

// ポップアップ表示ボタン
openButton.addEventListener('click', () => {
	dialog.showModal();
});

<button id="openButton">ポップアップを表示する</button>

ページ読み込み時にポップアップを自動で表示

// DOMの読み込みが完了したら実行
document.addEventListener('DOMContentLoaded', () => {
	const dialog = document.querySelector('dialog');
	dialog.showModal();
});

お客様

重要なお知らせなどは、ページ読み込み時に自動で表示したほうが良さそうですね。

<dialog>タグのカスタマイズ

背景（バックドロップ）のスタイルを変更する

<dialog>タグの後ろの背景については、CSSで指定することで色や透明度などを自由にカスタマイズすることができます。

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}

ポップアップウィンドウの外をクリックした場合も閉じる

<dialog>タグは閉じるボタンの他にも、デフォルトでESCキーを押して閉じることができますが、JavaScriptのコードを追加することで背景（バックドロップ）をクリックした場合も閉じるようなカスタマイズが可能です。

// バックドロップをクリックして閉じる
dialog.addEventListener('click', (e) => {
	const rect = dialog.getBoundingClientRect();
	const isInDialog = (rect.top <= e.clientY && e.clientY <= rect.top + rect.height &&
		rect.left <= e.clientX && e.clientX <= rect.left + rect.width);
	if (!isInDialog) {
		dialog.close();
	}
});

お客様

たしかに、ポップアップを閉じる方法は色々あったほうがユーザーには親切ですね。

<dialog>タグによるアクセシビリティへの配慮

<dialog>タグは、各ブラウザのデフォルト機能でアクセシビリティへ配慮された実装となっています。

音声読み上げソフト（スクリーンリーダー）に対応している
ESCキーでも閉じることができる
ブラウザのポップアップブロック機能に影響されない

このように、多くの環境でユーザー側にも使いやすい仕様となっているため、安心して利用することができます。

<dialog>タグのブラウザ対応状況

現在、Edge、Chrome、Firefox、Safariをはじめとした主要ブラウザの最新版では、全て<dialog>タグをサポートしています。

https://caniuse.com/dialog

Internet Explorer（IE）ではサポートされていませんが、IE自体のサポートが終了しているため、多くの環境では問題なく閲覧できます。
もしIEへの対応も行う場合は、従来のJavaScriptを使う方法が必要となります。

まとめ

HTMLだけでポップアップ！JavaScriptなしでダイアログボックスを実装する方法
今回はJavaScriptベースのポップアップウィンドウと比べて、よりメンテナンスがしやすく、アクセシビリティにも優れた<dialog>タグについてご紹介しました。
HTML5のちょっとした小ネタですが、皆様のお役に立てれば幸いです。

株式会社プレスマンはお客様のプロジェクトの一員となり、Web開発やDX支援などの多岐にわたり現場の課題解決をお手伝いします。｢こんなことまで頼んで大丈夫？」という内容でも、まずはお気軽にご相談ください。