当記事では、Javascriptでモーダルウィンドウを実装する方法について記します。
ボタンクリックでモーダルウィンドウが開き、背景 or 閉じるボタンのクリックでモーダルウィンドウが閉じるというようなイメージになります。
記事の下の方に実際に動かせるデモも用意しております。
⓪モーダルウィンドウとは
モーダルウィンドウは、Webページ上でコンテンツを表示するためのポピュラーなUIパターンです。モーダルウィンドウは、ユーザーが他のコンテンツとの対話を一時的に中断し、重要な情報やタスクに集中できるようにするために使用されます。
モーダルウィンドウは通常、オーバーレイと呼ばれる透明な背景と、前面に浮かび上がるウィンドウ本体から構成されます。モーダルウィンドウが表示されている間、ユーザーはウィンドウの外側のコンテンツに対して操作できなくなります。このような挙動により、ユーザーの注意をモーダルウィンドウ内の情報やタスクに集中させることができます。
モーダルウィンドウは、様々なシナリオで利用されます。例えば、重要なメッセージの表示、ユーザーに入力を求めるフォームの表示、確認や警告のダイアログの表示などがあります。
①HTML：モーダルウィンドウのトリガーボタンとコンテンツを用意する
モーダルウィンドウのトリガーボタンとコンテンツを用意します。
ここではコンテンツを画像としています。
<button class="modal-btn">モーダルウィンドウを表示</button>
<div class="modal close">
<div class="content">
<div class="close-btn close">×</div>
<img src="img/sample.png">
</div>
</div>②CSS：モーダルウィンドウのスタイルを調整する
1~10行目でモーダルウィンドウを最前面で固定し、非表示に、
11~21行目で閉じるボタンを右上に固定し、スタイルを適用、
22~28行目でコンテンツの幅を決め、中央寄せにしています。
.modal{
display: none;
position:fixed;
top: 0;
left:0;
width: 100vw;
height: 100vh;
z-index: 9999;
background-color: #1119;
}
.modal .close-btn {
position: absolute;
cursor: pointer;
top: 5px;
right: 5px;
border-radius: 50%;
background-color: #fff;
font-weight: bold;
font-size: 20px;
line-height: 1;
padding: 3px;
}
.modal .content{
position: relative;
width: 40%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal .content img{
width: 100%;
}③Javascript：モーダルウィンドウの表示と非表示を切り替える
1行目でクリックイベントを登録し、
2~4行目でトリガーボタンをクリックした時にモーダルウィンドウを表示、
5~7行目で背景/閉じるボタンをクリックした時にモーダルウィンドウを非表示にするようにしています。
document.addEventListener('click', function(e){
if(e.target.classList.contains('modal-btn')){
e.target.nextElementSibling.style.display='block'
}
if(e.target.classList.contains('close')){
e.target.closest('.modal').style.display='none'
}
})デモ
実際に動きを確認できるデモを用意しました。
ボタンをクリックするとモーダルウィンドウが開き、背景/閉じるボタンをクリックすると閉じると思います。
下記のように複数置いても問題なく動きます。
ソースコード全文
最後にソースコードを全文載せておきます。
<style>
.modal{
display: none;
position:fixed;
top: 0;
left:0;
width: 100vw;
height: 100vh;
z-index: 9999;
background-color: #1119;
}
.modal .close-btn {
position: absolute;
cursor: pointer;
top: 5px;
right: 5px;
border-radius: 50%;
background-color: #fff;
font-weight: bold;
font-size: 20px;
line-height: 1;
padding: 3px;
}
.modal .content{
position: relative;
width: 40%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal .content img{
width: 100%;
}
</style>
<button class="modal-btn">モーダルウィンドウを表示</button>
<div class="modal close">
<div class="content">
<div class="close-btn close">×</div>
<img src="img/sample.png">
</div>
</div>
<button class="modal-btn">モーダルウィンドウを表示</button>
<div class="modal close">
<div class="content">
<div class="close-btn close">×</div>
<img src="img/sample2.png">
</div>
</div>
<script>
document.addEventListener('click', function(e){
if(e.target.classList.contains('modal-btn')){
e.target.nextElementSibling.style.display='block'
}
if(e.target.classList.contains('close')){
e.target.closest('.modal').style.display='none'
}
})
</script>
以上、Javascriptでモーダルウィンドウを実装する方法でした。
