モーダルウィンド(ポップアップ)の実装のやり方はネットでたくさん出てきますが、
例えば、複数のアイテムがあって、そのアイテムのトリガーとなる部分を押すと
それに対応したモーダルを表示させるようなやり方が見つからず苦労したのでメモします。
↓こんなイメージです。↓
ちなみに、今からやろうとしていることはbootstrapを使えば簡単に実装できるのですが、bootstrapのデザインをそのまま使うのが嫌でオリジナルなデザインにしようとしたものの、
cssのカスタマイズが面倒で、それならいっそ自分で実装すればいいやと考えた経緯があります。
あくまでやり方の紹介なので、cssのデザインは最低限の簡素なものです。
また、htmlファイルにcssもjavascriptも全部記載してます。
htmlとcssのコーディング
それでは、下記のようにベースとなるhtmlファイルを作成します。cssも一緒に書きましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>複数モーダル</title>
<style>
.mordal-trigers{
display: block;
width: 400px;
height:50px;
border: solid 1px gray;
margin: 20px;
}
#modal-overlay{
display: none;
background: rgba(0, 0, 0, .5);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.modal-style{
display: none;
background: white;
width: 350px;
height: 430px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1001;
}
.modal-style h3{
text-align: center;
}
</style>
</head>
<body>
<h1>複数モーダル</h1>
<button class="mordal-trigers">トリガー0</button>
<!-- 背景 -->
<div id="modal-overlay"></div>
<!-- モーダル部分 -->
<div class="modal-style" id="modal#0">
<button class="mordal-close-buttons" data-close="modal#0">閉じる</button>
<h3>モーダル0</h3>
</div>
<button class="mordal-trigers">トリガー1</button>
<!-- 背景 -->
<div id="modal-overlay"></div>
<!-- モーダル部分 -->
<div class="modal-style" id="modal#1">
<button class="mordal-close-buttons" data-close="modal#1">閉じる</button>
<h3>モーダル1</h3>
</div>
<button class="mordal-trigers">トリガー2</button>
<!-- 背景 -->
<div id="modal-overlay"></div>
<!-- モーダル部分 -->
<div class="modal-style" id="modal#2">
<button class="mordal-close-buttons" data-close="modal#2">閉じる</button>
<h3>モーダル2</h3>
</div>
<button class="mordal-trigers">トリガー3</button>
<!-- 背景 -->
<div id="modal-overlay"></div>
<!-- モーダル部分 -->
<div class="modal-style" id="modal#3">
<button class="mordal-close-buttons" data-close="modal#3">閉じる</button>
<h3>モーダル3</h3>
</div>
<button class="mordal-trigers">トリガー4</button>
<!-- 背景 -->
<div id="modal-overlay"></div>
<!-- モーダル部分 -->
<div class="modal-style" id="modal#4">
<button class="mordal-close-buttons" data-close="modal#4">閉じる</button>
<h3>モーダル4</h3>
</div>
</body>
</html>
画面で確認すると、こんな感じになります。
(トリガー)+(番号)と書かれたボタンが５個並んでいます。
モーダルと、モーダル表示された時の背景(半透明のブラック)もコーディングされてますが、
cssにより非表示になっています。
これからjavascriptで、例えばトリガー0をクリックすると対応するモーダル0が出現し、
トリガー1をクリックすると対応するモーダル1が出現・・・・という要領でモーダルの表示と、
モーダルに閉じるボタンをつけているので閉じるボタンでモーダルを消す処理を実装します。
htmlタグのbodyタグの終了タグの上にscriptタグを書き、
その中にjavascriptを書いていきます。下記を追記しましょう。
<body>
<!-- 省略 -->
<script>
'use strict'
var mordal_trigers = document.getElementsByClassName('mordal-trigers');
var mordal_close_buttons = document.getElementsByClassName('mordal-close-buttons');
// モーダル出現
for (var i = 0; i < mordal_trigers.length; i++) {
(function(n){
mordal_trigers[n].addEventListener('click', function() {
document.getElementById('modal#' + n).style.display = "block";
document.getElementById('modal-overlay').style.display = "block";
}, false);
})(i);
}
// モーダル消す
for (var i = 0; i < mordal_close_buttons.length; i++) {
(function(n){
mordal_close_buttons[n].addEventListener('click', function() {
// データ属性より消すモーダルのid名を取得
var modal = mordal_close_buttons[n].dataset.close;
document.getElementById(modal).style.display = "none";
document.getElementById('modal-overlay').style.display = "none";
}, false);
})(i);
}
</script>
</body>
これで実装完了です。
では試しにトリガー3をクリックしてみます。
すると、モーダル3が出現するはずです。
そして閉じるボタンで消すことも可能です。
以上です。何か参考になれば幸いです。