簡単なモーダルウィンドウの作り方を調べてみる

2024.01.19　Posted by Coding_team

Webプログラミング

こんにちは、クリエイターブログです。今回は簡単なモーダルウィンドウの作り方ついて紹介したいと思います。

従来jQueryなどのプラグインを用いて運用することが多いモーダルウィンドウですが、もっと簡単に今なら実装できるんじゃないかと思い方法を調べてみました。

そこで、現状一番簡単そうな方法を紹介がてら試しに実装してみようと思います。

今回用いるのはdialogタグを用いてjavascriptのshowModal()メソッドを利用する方法です。

以下の開発者向けドキュメントにも書いてある通り、主要ブラウザは一通り対応されています。

→HTMLDialogElement: showModal() メソッド – Web API | MDN

それとCSSの疑似クラス:modalを合わせて使用します。

こちらは一部対応されて無いものもありますが、あまり気にしなくてもいいでしょう。

→“:modal” | Can I use… Support tables for HTML5, CSS3, etc

では実装していきます。HTML部分は以下になります。

■HTML

<button id="modal-open">モーダルウィンドウを表示する</button>
<dialog id="modal">
	<p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
	<p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
	<p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
	<p>&nbsp;</p>
	<button id="modal-close">閉じる</button>
</dialog>

<button id="modal-open">モーダルウィンドウを表示する</button>

<p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

</dialog>

dialogタグでモーダルウィンドウで表示したい部分を囲んで、表示するボタン、閉じるボタンも合わせて作成します。

次にjavascript部分です。

■javascript

<script>
const open = document.getElementById('modal-open'); //表示するボタンとなる要素を指定
const close = document.getElementById('modal-close'); //閉じるボタンとなる要素を指定
const modal = document.getElementById('modal'); //モーダルウィンドウとなる要素を指定

open.addEventListener('click', () => {
	document.body.classList.add('fixed'); /* bodyのクラスfixedを付与 */
	modal.showModal(); /* モーダルを表示 */
});

close.addEventListener('click', () => {
	document.body.classList.remove('fixed'); /* bodyのクラスfixedを削除 */
	modal.close(); /* モーダルを非表示 */
});
</script>

const open = document.getElementById('modal-open'); //表示するボタンとなる要素を指定

const close = document.getElementById('modal-close'); //閉じるボタンとなる要素を指定

const modal = document.getElementById('modal'); //モーダルウィンドウとなる要素を指定

open.addEventListener('click', () => {

document.body.classList.add('fixed'); /* bodyのクラスfixedを付与 */

modal.showModal(); /* モーダルを表示 */

});

close.addEventListener('click', () => {

document.body.classList.remove('fixed'); /* bodyのクラスfixedを削除 */

modal.close(); /* モーダルを非表示 */

});

</script>

記述量は非常に少なく、とてもシンプルになります。showModal()、close()がモーダルウィンドウに関するメソッドになります。

bodyにクラスfixed付与する処理を入れていますが、CSSと合わせて説明します。

■CSS

body.fixed { /* iOSは16以降でモーダル表示中に背景より後ろをスクロールさせない */
	overflow: hidden;
}

dialog:modal { /* モーダルウィンドウのカスタマイズ */
	border: 1px solid #000;
	background: #dcdcdc;
}

dialog::backdrop { /* 背景となる部分のカスタマイズ */
	background: #000;
	opacity: .4;
}