モーダルウィンドウ、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
}//.modal
JavaScript
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";
}
};
ギャラリーとかの別バージョンHTMLとSCSS
HTML
<div class="gallery-list grid x3">
<div class="modalOpen" data-modal="modal1">
<img src="assets/images/loop/loop_01.jpg" alt="">
</div>
<div class="modalOpen" data-modal="modal2">
<img src="assets/images/loop/loop_02.jpg" alt="">
</div>
<div class="modalOpen" data-modal="modal3">
<img src="assets/images/loop/loop_03.jpg" alt="">
</div>
</div>
<div id="modal1" class="modal">
<div class="modal-wrap">
<div class="modal-box">
<div class="modal-close-btn modalClose" aria-label="閉じる"><span class="lineClose"></span></div>
<div class="modal-thum">
<img src="assets/images/loop/loop_01.jpg" alt="">
</div>
</div>
</div>
</div>
<div id="modal2" class="modal">
<div class="modal-wrap">
<div class="modal-box">
<div class="modal-close-btn modalClose" aria-label="閉じる"><span class="lineClose"></span></div>
<div class="modal-thum">
<img src="assets/images/loop/loop_02.jpg" alt="">
</div>
</div>
</div>
</div>
<div id="modal3" class="modal">
<div class="modal-wrap">
<div class="modal-box">
<div class="modal-close-btn modalClose" aria-label="閉じる"><span class="lineClose"></span></div>
<div class="modal-thum">
<img src="assets/images/loop/loop_03.jpg" alt="">
</div>
</div>
</div>
</div>
SCSS
.modalOpen{
cursor: pointer;
}
.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.8);
.modal-wrap{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-box {
background-color: var(--c-font);
padding: 15px;
max-width: 800px;
width: 90%;
animation-name: modalopen;
animation-duration: 1s;
position: relative;
.modal-thum{
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.modalClose{
position: absolute;
top: 0;
right: 0;
}
}//.modal-box
/* 閉じるボタン */
.modal-close-btn {
position: absolute;
right: -5px;
top: -5px;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 20;
&:hover {
opacity: .8;
}
}
/* 閉じるボタンのX */
.lineClose {
display: inline-block;
vertical-align: middle;
color: var(--c-white);
line-height: 1;
width: 2rem;
height: .2rem;
background: currentColor;
border-radius: 0.1rem;
position: relative;
transform: rotate(45deg);
}
.lineClose::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform: rotate(90deg);
}
}//.modal
.grid{
display: grid;
gap: 30px 20px;
&.x3{
@include mq(tb) {
grid-template-columns: repeat(3, 1fr);
}
}//&.x3
}
参考にさせてもらったサイト
JavaScriptの.querySelectorAll()で複数のモーダル
とてもわかりやすく解説してあります。ありがとうございます。