Modal Image Gallery for Pictures modal Popup with JS

Modal image gallery for your pictures or photos modal popup is created by using custom JavaScript and HTML. We can use it for the images gallery section whereby we can view the image in full view.

HTML

<!-- Gallary Images List -->
<div class="gallary">
    <img id="image" src="/images/cover-img.jpg" alt="Gallary Image" title="Click on Image">
</div>

<!-- Image On FullScreen with Modal  -->
<div id="imgModal" class="modal">
    <span id="close" onclick="myFunction()">×</span>
    <img id="FullView" alt="Full Screen Image">
    <div id="caption">
        <h3>What is Lorem Ipsum?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text</p>
    </div>
</div>

CSS

  * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  font-family: arial;
}
.gallary img#image {
    width: 300px;
    border-radius: 10px;
    margin: 50px auto;
    cursor: zoom-in;
    display: block;
    border: 2px solid #f7f7f7;
}
#FullView {
    margin: 0px auto 20px;
    display: block;
    border-radius: 10px;
    border: 10px solid #f9f9f9;
}
#caption h3 {
    font-size: 18px;
    margin: 10px 0px;
}
#caption p {
    font-size: 14px;
    line-height: 23px;
    color: #ddd;
}
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 8%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
}
#caption {
    text-align: center;
    color: #fff;
    border-radius: 20px;
}
#close {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #d0d0d0;
    font-size: 40px;
    cursor: pointer;
    z-index: 99999;
}

JavaScript

function myFunction() {
    document.getElementById("imgModal").style.display = "none";
}

var img = document.getElementById("image");
var modal = document.getElementById("imgModal");
var modalImg = document.getElementById("FullView");

img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
}