Here’s a simple implementation of multiple modals for a gallery website using HTML, CSS, and JavaScript. Each image in the gallery will have its own modal. When an image is clicked, a modal opens to display a larger version of the image with a close button.
HTML
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery with Modals</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<!-- Gallery Item 1 -->
<div class="gallery-item">
<img src="image1.jpg" alt="Image 1" class="gallery-img" onclick="openModal(1)">
<div id="modal1" class="modal">
<span class="close" onclick="closeModal(1)">×</span>
<img class="modal-content" id="modal-img1">
<div class="caption">Image 1 Description</div>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="gallery-item">
<img src="image2.jpg" alt="Image 2" class="gallery-img" onclick="openModal(2)">
<div id="modal2" class="modal">
<span class="close" onclick="closeModal(2)">×</span>
<img class="modal-content" id="modal-img2">
<div class="caption">Image 2 Description</div>
</div>
</div>
<!-- Add more gallery items as needed -->
</div>
<script src="scripts.js"></script>
</body>
</html>
CSS (styles.css)
cssCopy code/* Gallery styles */
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery-item {
position: relative;
}
.gallery-img {
width: 200px;
height: auto;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 5px;
transition: 0.3s;
}
.gallery-img:hover {
border-color: #000;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
position: absolute;
top: 10px;
right: 25px;
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
.caption {
text-align: center;
color: #ccc;
padding: 10px 0;
}
JavaScript (scripts.js)
javascriptCopy codefunction openModal(modalId) {
var modal = document.getElementById("modal" + modalId);
var modalImg = document.getElementById("modal-img" + modalId);
var galleryImg = document.querySelector('.gallery-item:nth-child(' + modalId + ') img');
modal.style.display = "block";
modalImg.src = galleryImg.src;
}
function closeModal(modalId) {
var modal = document.getElementById("modal" + modalId);
modal.style.display = "none";
}
How it works:
- Each gallery image is wrapped in a
divwith a unique modal. - When an image is clicked, the
openModalfunction is triggered, opening the corresponding modal by its ID. - The modal displays the larger version of the image, and it can be closed by clicking the “X” or outside the image.
You can add as many gallery items as needed, each with a unique modal and respective image. Just copy and paste the gallery-item block for each new image, and update the openModal and closeModal function calls with the corresponding modal IDs.
Leave a Reply