【HTML/CSS/JavaScript】画像をクリックするとモーダルウィンドウで画像を表示するデモを作成！【Web学習】

2024年1月17日
デモ
HTML/CSS, JavaScript

デモ

今回はHTMLとCSSとJavaScriptで画像をクリックするとモーダルウィンドウで画像を表示するデモを作成しました。

1 実際の表示
2 ソースコード例
3 まとめ

実際の表示

ソースコード例

HTMLソースコード例

<div class="gallery__list">
	<div class="gallery__item">
		<div class="gallery__img">
			<img src="" alt="赤色のスライド" width="300" height="300">
		</div>
	</div>
	<div class="gallery__item">
		<div class="gallery__img">
			<img src="" alt="オレンジ色のスライド" width="300" height="300">
		</div>
	</div>
	<div class="gallery__item">
		<div class="gallery__img">
			<img src="" alt="黄色のスライド" width="300" height="300">
		</div>
	</div>
	<div class="gallery__item">
		<div class="gallery__img">
			<img src="" alt="水色のスライド" width="300" height="300">
		</div>
	</div>
	<div class="gallery__item">
		<div class="gallery__img">
			<img src="" alt="緑色のスライド" width="300" height="300">
		</div>
	</div>
	<div class="gallery__item">
		<div class="gallery__img">
			<img src="" alt="青色のスライド" width="300" height="300">
		</div>
	</div>
</div>

<div class="modal">
    <span class="close">×</span>
	<div class="modal-content">
		<div class="modal__img">
			<img id="modalImg" src="" alt="" width="300" height="300">
		</div>
		<div id="caption"></div>
	</div>
</div>

HTMLソースコード解説

「.gallery__img」内の画像srcは各自用意してください。「.modal__img」内の画像srcとaltは指定不要です。「#caption」内の指定も不要です。理由はJavaScriptのところで後述します。

CSSソースコード例

画像の縦横比は1：1で設定しています。他の比にされる場合は「.gallery__img img」と「.modal__img img」の「padding-top」の値を調整してください。

.gallery__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
}
.gallery__item {
    width: calc(33% - 12px);
}
.gallery__img {
    position: relative;
}
.gallery__img::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.gallery__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 10px;
}


.modal {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.9);
    transition: all 0.3s;
}
.modal.open {
    visibility: visible;
    opacity: 1;
}
.modal-content {
    width: 300px;
    height: 350px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.modal__img {
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}
.modal__img::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.modal__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 10px;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    cursor: pointer;
}

#caption {
    display: block;
    text-align: center;
    color: #ccc;
    padding: 0 10px;
}

@media screen and (max-width: 767px) {
    .gallery__item {
        width: calc(50% - 10px);
    }
}
@media screen and (max-width: 480px) {
    .gallery__item {
        width: 100%;
    }
}

JavaScriptソースコード例

document.addEventListener("DOMContentLoaded", () => {
    const modal = document.querySelector(".modal");
    const modalImg = document.getElementById("modalImg");
    const captionText = document.getElementById("caption");
    const close = document.querySelector(".close");

    document.querySelectorAll(".gallery__img img").forEach(img => {
        img.onclick = function(){
            modal.classList.add("open");
            modalImg.src = this.src;
			modalImg.alt = this.alt;
            captionText.innerHTML = this.alt;
        }
    });

    close.onclick = function() {
        modal.classList.remove("open");
    }
});

JavaScript解説

document.querySelectorAll(“.gallery__img img”).forEach・・・

クリックした画像に対してクリックイベントが発生するようにしています。

modalImg.src = this.src;

クリックした画像のsrc属性をモーダルの画像のsrc属性に指定します。先述した「.modal__img」内の画像srcが指定不要となる理由はこれです。

modalImg.alt = this.alt;

クリックした画像のalt属性をモーダルの画像のalt属性に指定します。

captionText.innerHTML = this.alt;

<div id="caption"></div>にクリックした画像のalt属性を指定します。

このJavaScriptのメリット

スライドの枚数が増えてもモーダル部分のHTMLが1つで良い！

まとめ

モーダルウィンドウは実務でもたまに出てくるのでぜひマスターしてください！