Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

📸How To Create Modal Image Box🖼️

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • window.onclick event in JS
  • Event in JS
  • position property in CSS
  • Animation, overflow, z-index property in CSS

Click each images in the below.

img_snow_wide
img_mountains_wide
img_lights_wide
img_nature_wide
img_5terre_wide
img_woods_wide
X
img_snow_wide
Hello

HTML


<div class="showcontent">

<div class="modalImgRow">

    <div class="modalImges">

        <div><img src="All images\img_snow_wide.jpg" alt="img_snow_wide"></div>

        <div><img src="All images\img_mountains_wide.jpg" alt="img_mountains_wide"></div>

        <div><img src="All images\img_lights_wide.jpg" alt="img_lights_wide"></div>

        <div><img src="All images\img_nature_wide.jpg" alt="img_nature_wide"></div>

        <div><img src="All images\img_5terre_wide.jpg" alt="img_5terre_wide"></div>

        <div><img src="All images\img_woods_wide.jpg" alt="img_woods_wide"></div>

    </div>

    <div class="modal">

        <span onclick="this.parentElement.style.display='none';">X</span>

        <div class="modalShowed">

            <div><img src="All images\img_snow_wide.jpg" alt="img_snow_wide"></div>

            <div class="caption">Hello</div>

        </div>

    </div>

</div>


</div>

JavaScript


window.onclick=function(event){
    let target=event.target.parentElement.parentElement.className;

    let images=document.querySelectorAll(".modalImges div img");

    let showed=document.querySelector(".modal .modalShowed div img");
    console.log(showed);

    let caption=document.querySelector(".caption");
    //console.log(event.target);
    if(target=="modalImges"){
        //console.log("Hell")
        //console.log(images[0]);
        for(let i=0;i< images.length;i++){
            if(images[i]==event.target){
                //console.log("YES "+ i);
                showed.src=images[i].src;
                document.querySelector(".modal").style.display="block";
                caption.innerHTML=images[i].alt;
            }
        }
    }
}

CSS


.modalImgRow .modalImges {
    width: 95%;
    margin: auto;
    display: flex;
}

.modalImges div {
    width: 16.6%;
}

.modalImges div img {
    width: 100%;
    min-height: 45px;
    opacity: 0.7;
    cursor: pointer;
}

.modalImges div img:hover {
    opacity: 1;
}

.modal {
    background-color: rgba(0, 0, 0, 0.87);
    padding-top: 100px;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 88px;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 2px 2px 3px 3px black;
    animation-name: ex;
    animation-timing-function: ease-in-out;
    animation-duration: 0.7s;
    display: none;
}

@keyframes ex {
    from {
        width: 0;
        opacity: 0.5;
    }

    to {
        width: 100;
        opacity: 1;
    }

}

.modal div {
    width: 90%;
    margin: auto;
}

.modal div img {
    width: 100%;

}

.modal span {
    color: white;
    position: absolute;
    right: 8%;
    top: 10%;
    cursor: pointer;
    font-size: 18px;
}

.modal span:hover {
    color: red;
}

.modal .caption {
    background-color: #111;
    color: white;
    text-align: center;
    padding: 8px;
    font-size: 20px;
    margin-top: -3px;
}

HTML DOM

  • querySelector: retuns the first element within the document that matches the specified CSS selctor. Example: const sampleElement = document.querySelector('.sample').If there are mutltiple element with the class name 'sample' `querySelector` will return the first matching elements.
  • You can also use getElementById, getElementByClassName, querySelectorAll etc

String charAt()

  • The charAt(): method in JavaScript returns the character at a specified index in a string. The index starts from 0. Example: const str = "Hello, World!";
    const char = str.charAt(7)

setTimeOut method()

  • setTimeOut(function-name, millsec): that will execute the provided function after certain millisecond.
    clearTimeout(timeoutId) used to cancel time out if needded.

requestAnimationFrame()

  • requestAnimationFrame(): works by calling the provided callback function before the next repaint, allowing smooth animations.
    Example requestAnimationFrame(function_name);