モーダルウィンドウ実装のまとめです。
目次
作りたいもの
See the Pen Untitled by Tomoka (@tomokoro) on CodePen.
クリックした画像が拡大するモーダルウィンドウ
モーダルが開いているときは背景は動かないようにする
画像・画像のない部分、どちらをクリックしてもモーダルが閉じるようにする
HTML
<div class="gallery">
<div class="gallery__modal js-overlay"></div>
<div class="gallery__items">
<div class="gallery__item js-photo">
<img src="https://picsum.photos/id/63/200/300" alt="1" />
</div>
<div class="gallery__item js-photo">
<img src="https://picsum.photos/id/30/200/300" alt="2" />
</div>
<div class="gallery__item js-photo">
<img src="https://picsum.photos/id/42/200/300" alt="3" />
</div>
<div class="gallery__item js-photo">
<img src="https://picsum.photos/id/63/200/300" alt="4" />
</div>
</div>
</div>CSS
.gallery {
margin-top: 40px;
max-width: 500px;
width: 100%;
margin-inline: auto;
position: relative;
z-index: 0;
}
.gallery__items {
display: grid;
grid-auto-flow: dense;
gap: 8px;
grid-template-columns: repeat(2, 1fr);
}
.gallery__item {
cursor: pointer;
}
.gallery__item img {
aspect-ratio: 345/219;
width: 100%;
height: 100%;
object-fit: cover;
}
/* モーダル */
.gallery__modal {
display: none;
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
background: rgba(32, 32, 32, 0.80);
z-index: 1;
}
.gallery__modal img {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
max-width: 300px;
aspect-ratio: 1/1;
width: 100%;
max-height: 80%;
object-fit: cover;
z-index: 1;
}JavaScript
let scrollPos;
$(".js-photo").click(function () {
scrollPos = $(window).scrollTop();
$(".js-overlay").html($(this).prop("outerHTML"));
$(".js-overlay").fadeIn(200);
$('html').addClass('is-fixed');
return false;
});
$(".js-overlay").click(function () {
$(".js-overlay").fadeOut(200, function () {
$('html').removeClass('is-fixed');
$(window).scrollTop(scrollPos);
});
return false;
});