|
Modal images provide an interactive way to display larger versions of images without navigating away from the current page and it takes user attention and users can stay on our website some more time.
 Preview Approach- First, create a basic HTML layout for your image gallery and modal pop-ups. Each image in the gallery should have a corresponding modal with a unique ID.
- Then use CSS to style your webpage, including elements like image containers, galleries, modals, and layout components
- And for making the model images responsive use the media queries in CSS. This ensures that your images adapt well to different screen sizes and devices.
- Implement JavaScript functions to handle the opening and closing of modal windows when images are clicked. When a user clicks on an image, fetch the respective modal ID and set its display property to “block”. Similarly, clicking the close button should set the display property of the modal to “none”.
Example: The example shows how to create responsive modal images using CSS and Javascript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Responsive Modal Images</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="main-heading">
Responsive Modal Images
</h1>
<div class="gallery">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg"
alt="HTML" class="gallery-image"
onclick="openModal('modal1', 1)">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg"
alt="JavaScript" class="gallery-image"
onclick="openModal('modal2', 2)">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg"
alt="Web" class="gallery-image"
onclick="openModal('modal3', 3)">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154945/web2-(1).jpg"
alt="Web 2" class="gallery-image"
onclick="openModal('modal4', 4)">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
alt="Cyber security" class="gallery-image"
onclick="openModal('modal5', 5)">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230416201559/DevOps-Roadmap.webp"
alt="Devops" class="gallery-image"
onclick="openModal('modal6', 6)">
</div>
<div id="modal1" class="modal">
<span class="close"
onclick="closeModal('modal1')">
×
</span>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg"
alt="HTML"
class="modal-content">
<div class="message"></div>
</div>
<div id="modal2" class="modal">
<span class="close"
onclick="closeModal('modal2')">
×
</span>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg"
alt="JavaScript" class="modal-content">
<div class="message"></div>
</div>
<div id="modal3" class="modal">
<span class="close"
onclick="closeModal('modal3')">
×
</span>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg"
alt="Web"
class="modal-content">
<div class="message"></div>
</div>
<div id="modal4" class="modal">
<span class="close"
onclick="closeModal('modal4')">
×
</span>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154945/web2-(1).jpg"
alt="Web 2"
class="modal-content">
<div class="message"></div>
</div>
<div id="modal5" class="modal">
<span class="close"
onclick="closeModal('modal5')">
×
</span>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
alt="Cyber security" class="modal-content">
<div class="message"></div>
</div>
<div id="modal6" class="modal">
<span class="close"
onclick="closeModal('modal6')">
×
</span>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230416201559/DevOps-Roadmap.webp"
alt="Devops" class="modal-content">
<div class="message"></div>
</div>
<script>
function openModal(modalId, index) {
let modal = document.getElementById(modalId);
modal.style.display = "flex";
modal.classList.add("show");
let message = modal.querySelector(".message");
message.innerText =
`You clicked on the ${index} image.`;
}
function closeModal(modalId) {
let modal = document.getElementById(modalId);
modal.classList.remove("show");
setTimeout(function () {
modal.style.display = "none";
modal.querySelector(".message").innerText = "";
}, 300);
}
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #12dea4;
}
.main-heading {
color: #2051e6;
text-align: center;
margin: 20px 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0 20px;
}
.gallery-image {
position: relative;
width: calc(33.33% - 20px);
margin: 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery-image:hover {
transform: scale(1.1);
}
.modal {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-content {
position: relative;
width: 90%;
height: 90%;
max-width: 500px;
max-height: 80%;
border-radius: 5px;
overflow: hidden;
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.modal.show {
display: flex;
opacity: 1;
}
.close {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: transform 0.3s ease;
}
.close:hover {
transform: rotate(45deg);
}
.message {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(13, 219, 6, 0.7);
color: #fff;
padding: 5px 10px;
border-radius: 5px;
}
@media screen and (max-width: 768px) {
.gallery-image {
width: calc(50% - 20px);
}
}
@media screen and (max-width: 480px) {
.gallery-image {
width: calc(100% - 20px);
}
}
Output:
|
