JS achieves the modal box effect after image clicking, js Mode

JS achieves the modal box effect after image clicking, js Mode

Most of the time, when we browse images, we will find that after clicking images, a enlarged image is displayed and floating on the page, occupying the entire window. This is the image modal box effect.

This effect can be achieved using some js libraries, suchbpopupJs. But here we use pure js implementation to better understand the effect principle and implementation method.

I. Implementation ideas

After clicking on a small image, the image modal box appears. At the same time, the image modal box contains a close button and the image title.

Therefore, our implementation philosophy is:

The image modal box contains three parts: large image, closed button, and image title.

Hide the image modal box. After you click a small image, the modal box appears.

Click the close button to hide the modal box.

Ii. HTML code

First, we have an image on the original page as follows:

The HTML code is as follows:

<H2> click the pop-up modal box on the image. 
The HTML code of the modal box is as follows:
<div class="motai" id="mo"> <span class="close" id="close">×</span>  <div id="caption"></div></div>
San.css code
We need to use css to set the effect of each element in the modal box and hide it at the same time. The steps are as follows:
1. modal box
# Mo {display: none;/* Hide the modal box */width: 100%; height: 100%; position: fixed;/* The positioning method is fixed */overflow: auto; /* Do not scroll */background-color: rgba (0.7, 0,); top: 0px; left: 0px; z-index: 1; /* place on top of the page Layer */}
2. Close button
 .close{  font-size: 40px;  font-weight: bold;  position: absolute;  top: 20px;  right: 14%;  color:#f1f1f1; } .close:hover, .close:focus{  color:#bbb;  cursor:pointer; }
3. Images in the modal box
# Moimg {display: block;/* the image is displayed as a block */margin: 25px auto;/* the image is centered and aligned */width: 60%; max-width: 750px; /* Adaptive Layout */}
4. Image title
# Caption {text-align: center;/* text center */margin: 15px auto; width: 60%; max-height: 750px; font-size: 20px; color: # ccc ;}
The above is the css code for each element of the basic modal box. To expand the animation effect after clicking, you can add the following code:

 #moimg,#caption{  -webkit-animation: first 1s;  -o-animation: first 1s;  animation: first 1s; } @keyframes first{  from{transform: scale(0.1);}  to{transform: scale(1);} }
Through the above steps, we have created the modal box page. You can use js to complete interaction.
Iv. js Code
Js Code mainly refers to interaction between images and closed buttons. It should be noted that js Code must be placed after the HTML code of the modal box. The specific js Code is as follows ,:
var motai=document.getElementById('mo') var moimg=document.getElementById("moimg") var realimg=document.getElementById("real") var caption=document.getElementById("caption") realimg.onclick=function(){  motai.style.display="block"  moimg.src=this.src  caption.innerHTML=this.alt } var span=document.getElementById("close"); span.onclick=function(){  motai.style.display="none"; }
Through the above steps, the modal box effect of the image is achieved,

The Code is as follows:
<! DOCTYPE html> 
The above is a small series of JS implementation images that appear after clicking the modal box effect, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!