モーダルウィンドウ、idでページに一つだけ実装すると、複数設置したいときにモーダル開かない、、複数のときどうだったけ？といつも調べてるのでコピペで使えるようにメモしとく。
HTML
data-modal=”modal1″とid=”modal1″が対になっている。名前は何でもいいけど同じ名前にする。
modal-box内と.modalCloseを好きに調整。
<button class="modalOpen" data-modal="modal1">モーダル1</button>
<button class="modalOpen" data-modal="modal2">モーダル2</button>
<div id="modal1" class="modal">
<div class="modal-box">
<p>ここにモーダル1のコンテンツが入ります</p>
<button class="modalClose">閉じる</button>
</div>
</div>
<div id="modal2" class="modal">
<div class="modal-box">
<p>ここにモーダル2のコンテンツが入ります</p>
<button class="modalClose">閉じる</button>
</div>
</div>SCSS
最大横幅640pxでセンター表示。最小90%でレスポンシブ対応。
.modal-boxと.modalCloseを好きに調整する。
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
.modal-box {
background-color: #fff;
margin: 10% auto;
max-width: 640px;
width: 90%;
border-radius: 10px;
animation-name: modalopen;
animation-duration: 1s;
position: relative;
.modalClose{
position: absolute;
top: 0;
right: 0;
}
}//.modal-box
}//.modalJavaScript
const modalBtns = document.querySelectorAll(".modalOpen");
modalBtns.forEach(function (btn) {
btn.onclick = function () {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block";
};
});
const closeBtns = document.querySelectorAll(".modalClose");
closeBtns.forEach(function (btn) {
btn.onclick = function () {
var modal = btn.closest('.modal');
modal.style.display = "none";
};
});
window.onclick = function (event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
};参考にさせてもらったサイト
JavaScriptの.querySelectorAll()で複数のモーダル
とてもわかりやすく解説してあります。ありがとうございます。
