Images Modales Responsives CSS

Galerie d'Images Modales Responsives

Une image modale permet à un utilisateur d'afficher une version agrandie d'une image sans quitter la page actuelle. Lorsqu'un utilisateur clique sur une image modale, une fenêtre popup apparaît au-dessus du contenu principal de la page web, souvent avec un fond semi-transparent. La modale doit être fermée par l'utilisateur, généralement à l'aide d'un bouton "fermer" ou d'un signe "X" dans le coin supérieur droit.

Cet exemple démontre comment utiliser HTML, CSS et JavaScript ensemble pour créer une galerie d'images modales responsives.

Nous utilisons CSS pour créer une fenêtre modale (boîte de dialogue) et la cacher par défaut.

Ensuite, nous utilisons JavaScript pour afficher la fenêtre modale avec l'image correcte à l'intérieur lorsque l'utilisateur clique sur l'image :

Exemple

 <html> 
 <head> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <style> 
 * { 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
 } 
 
 h1 { 
 text-align: center; 
 padding: 20px; 
 } 
 
 .gallery { 
 display: flex; 
 flex-wrap: wrap; 
 justify-content: flex-start; 
 padding: 0 15px; 
 } 
 
 .gallery-item { 
 position: relative; 
 width: calc(25% - 20px); 
 height: auto; 
 margin: 10px; 
 cursor: pointer; 
 transition: transform 0.5s ease; 
 } 
 
 .gallery-item:hover { 
 transform: scale(1.1); 
 } 
 
 /* La Modale (arrière-plan) */ 
 .modal { 
 display: none; 
 position: fixed; 
 z-index: 1000; 
 left: 0; 
 top: 0; 
 width: 100%; 
 height: 100%; 
 background-color: rgba(0, 0, 0, 0.8); 
 align-items: center; 
 justify-content: center; 
 transition: opacity 0.5s ease; 
 } 
 
 /* Contenu de la modale (image) */ 
 .modal-content { 
 position: relative; 
 width: 90%; 
 height: auto; 
 max-width: 90%; 
 max-height: 90%; 
 border-radius: 5px; 
 overflow: hidden; 
 animation: zoomIn 0.5s; 
 } 
 
 @keyframes zoomIn { 
 from {transform: scale(0.6);} 
 to {transform: scale(1);} 
 } 
 
 .modal.show { 
 display: flex; 
 opacity: 1; 
 } 
 
 /* Bouton de fermeture */ 
 .close { 
 position: absolute; 
 top: 10px; 
 right: 15px; 
 color: #ffffff; 
 font-size: 35px; 
 font-weight: bold; 
 cursor: pointer; 
 transition: transform 0.3s; 
 } 
 
 /* Légende de l'image modale */ 
 .caption { 
 position: absolute; 
 bottom: 15px; 
 width: 100%; 
 text-align: center; 
 color: #ffffff; 
 font-size: 24px; 
 } 
 
 @media screen and (max-width: 768px) { 
 .gallery-item { 
 width: calc(50% - 20px); 
 } 
 } 
 
 @media screen and (max-width: 480px) { 
 .gallery-item { 
 width: calc(100% - 20px); 
 } 
 } 
 </style> 
 </head> 
 <body> 
 
 <h1>Images Modales Responsives</h1> 
 
 <div class="gallery"> 
 <img src="img_5terre.jpg" alt="Cinque Terre" class="gallery-item" onclick="openModal('modal1', 'Cinque Terre')"> 
 <img src="img_forest.jpg" alt="Forêt" class="gallery-item" onclick="openModal('modal2', 'Forêt')"> 
 <img src="img_lights.jpg" alt="Aurores Boréales" class="gallery-item" onclick="openModal('modal3', 'Aurores Boréales')"> 
 <img src="img_mountains.jpg" alt="Montagnes" class="gallery-item" onclick="openModal('modal4', 'Montagnes')"> 
 </div> 
 
 <div id="modal1" class="modal"> 
 <span class="close" onclick="closeModal('modal1')">&times;</span> 
 <img src="img_5terre.jpg" alt="Cinque Terre" class="modal-content"> 
 <div class="caption"></div> 
 </div> 
 
 <div id="modal2" class="modal"> 
 <span class="close" onclick="closeModal('modal2')">&times;</span> 
 <img src="img_forest.jpg" alt="Forêt" class="modal-content"> 
 <div class="caption"></div> 
 </div> 
 
 <div id="modal3" class="modal"> 
 <span class="close" onclick="closeModal('modal3')">&times;</span> 
 <img src="img_lights.jpg" alt="Aurores Boréales" class="modal-content"> 
 <div class="caption"></div> 
 </div> 
 
 <div id="modal4" class="modal"> 
 <span class="close" onclick="closeModal('modal4')">&times;</span> 
 <img src="img_mountains.jpg" alt="Montagnes" class="modal-content"> 
 <div class="caption"></div> 
 </div> 
 
 <script> 
 function openModal(modalId, caption) { 
 let modal = document.getElementById(modalId); 
 modal.style.display = "flex"; 
 modal.classList.add("show"); 
 let message = modal.querySelector(".caption"); 
 message.innerText = caption; 
 } 
 
 function closeModal(modalId) { 
 let modal = document.getElementById(modalId); 
 modal.classList.remove("show"); 
 setTimeout(function () { 
 modal.style.display = "none"; 
 modal.querySelector(".caption").innerText = ""; 
 }, 300); 
 } 
 </script> 
 
 </body> 
 </html> 

Essayez-le vous-même »