In this article, we will show you how to use JavaScript and CSS to create image pop-ups.
Picture material:
HTML code:
<!-- Trigger a pop-up window-the picture is changed to your picture address --> <img loading="lazy" id="myImg" src="img.jpg" alt="text description information" width="300" height="200"> <!-- Pop-up window --> <div id="myModal" class="modal"> <!-- Close button --> <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span> <!-- The content of the pop-up window --> <img class="modal-content" id="img01"> <!-- Text description --> <div id="caption"></div> </div>
CSS code:
/* Trigger the style of the pop-up image */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* Pop-up window background */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* picture */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Text content */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* Close button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* The width of the picture in the small screen is 100% */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } }
JavaScript code:
// Get the pop-up window var modal = document.getElementById('myModal'); // Get the picture and insert it into the pop-up window-use the "alt" attribute as the content of the text part var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element, set the close button var span = document.getElementsByClassName("close")[0]; // When (x) is clicked, the pop-up window is closed span.onclick = function() { modal.style.display = "none"; }