Hatena 
当記事では、Javascriptでモーダルポップアップを実装する方法について記します。
ボタンクリックでポップアップが開き、背景クリックでポップアップが閉じるというようなイメージになります。
記事の下の方に実際に動かせるデモも用意しております。
①HTML：ポップアップボタンと中身を用意する
ポップアップのボタン・背景・中身を用意します。
ここでは中身を画像としています。
<button class="popup_btn">ポップアップを表示する</button>
<div class="popup">
<div class="bg"></div>
<div class="main">
<img src="img/sample.png">
</div>
</div>②CSS：ポップアップの背景と中身のスタイルを調整する
1~7行目でポップアップを最前面で固定し、非表示に、
8~12行目で背景を画面いっぱいに広げ、背景色をグレーに、
13~19行目で中身を真ん中寄せにしております。
.popup{
position:fixed;
top: 0;
left:0;
z-index: 9999;
display: none;
}
.popup .bg{
width: 100vw;
height: 100vh;
background-color: #1119;
}
.popup .main{
width: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.popup .main img{
width: 100%;
}③Javascript：ポップアップの表示と非表示を切り替える
1行目ですべてのポップアップボタンにイベントを適用できるようにループを開始し、
3~5行目でボタンクリック時にポップアップを表示、
6~8行目で背景クリック時にポップアップを非表示にするようにしています。
document.querySelectorAll('.popup_btn').forEach(function(elem){
const popup = elem.nextElementSibling
elem.onclick = function() {
popup.style.display='block'
}
popup.querySelector('.bg').onclick = function() {
popup.style.display='none'
}
})デモ
実際に動きを確認できるデモを用意しました。
ボタンをクリックするとモーダルポップアップが開き、背景をクリックすると消えると思います。
下記のように複数置いても問題なく動きます。
ソースコード全文
最後にソースコードを全文載せておきます。
<style>
.popup{
position:fixed;
top: 0;
left:0;
z-index: 9999;
display: none;
}
.popup .bg{
width: 100vw;
height: 100vh;
background-color: #1119;
}
.popup .main{
width: 40%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.popup .main img{
width: 100%;
}
</style>
<button class="popup_btn">ポップアップ表示</button>
<div class="popup">
<div class="bg"></div>
<div class="main">
<img src="img/sample.png">
</div>
</div>
<script>
document.querySelectorAll('.popup_btn').forEach(function(elem){
const popup = elem.nextElementSibling
elem.onclick = function() {
popup.style.display='block'
}
popup.querySelector('.bg').onclick = function() {
popup.style.display='none'
}
})
</script>
以上、Javascriptでモーダルポップアップを実装する方法でした。
