Implementing image click pop-up window based on JavaScript instead of saving_javascript skills

I have always wanted to install a plug-in that pops up when a thumbnail is clicked, but after searching, almost all of them are made using PHP. The use and installation of the plug-in are extremely cumbersome, so I checked some demos online and implemented a pure js one by myself. Picture popup plugin.

The idea of ​​implementation is to write a function that hooks the onclick event of the image, append a div element to the body in the function, then put the incoming image object into the element, and at the same time listen to the onclilck event of the div. When the click is captured , and then close (actually hide) the pop-up div.

By collecting all the img elements on the page when the function is initialized, and then adding the onclick="picHook(this)" attribute to each img element, this function can automatically create a div when the image is clicked. Mask the background, get the width and height of the clicked image, and generate a new div with the same size as the image to display the image. When the mask is clicked again, the hook event responds again, and the style of the mask and image div is set to none, and the pop-up image is closed.

It’s easy to say, but it’s even easier to do. It’s so simple that you only need one function to implement it.

talking is cheap, show you my code:

<script>
function picHook(pic){
/*图片对象*/
var imgs = document.getElementsByTagName("img");
/*前景div*/
var light = document.getElementById('light') || document.createElement("div");
/*背景div*/
var bg = document.getElementById('bg') || document.createElement("div");
/*图片放大*/
var s_pic = document.getElementById('s_pic') || document.createElement("img");
/*css对象*/
var css = document.createElement("style");
/*css样式*/
var csstext = '\
.pic_bg{\
position: absolute;\
margin:0 auto; \
top: 0%;\
left: 0%;\
width: 100%;\
padding-bottom: 1000%;\
background-color: black;\
z-index:1001;\
opacity:.80;\
filter: alpha(opacity=80);\
overflow:scroll;\
}\
.pic_div {\
margin-bottom: auto;\
position: fixed;\
left:50%;\
top:50%;\
margin-left:-250px;\
margin-top:-100px;\
z-index:1002;\
}';
/*收集页面所有图片对象*/
for(i=0; i<imgs.length;i++){
imgs[i].setAttribute("onclick", "picHook(this)" );
}
css.type = "text/css";

/*关闭图像*/
if( !pic ){
bg.style.display = light.style.display = "none";
}
/*ie兼容*/
if(css.styleSheet){
css.styleSheet.cssText = csstext;
}else{
css.appendChild(document.createTextNode(csstext));
}
s_pic.setAttribute("id", "s_pic");
s_pic.setAttribute("src", pic.src);
light.setAttribute("id", "light");
light.setAttribute("class", "pic_div");
light.style.display = 'block';
light.appendChild(s_pic);
bg.setAttribute("id", "bg");
bg.setAttribute("class", "pic_bg");
bg.setAttribute("onclick", "picHook()");
bg.style.display = light.style.display;
document.getElementsByTagName("head")[0].appendChild(css); 
document.body.appendChild(bg);
document.body.appendChild(light);
}
</script>

Save this code in the head of the page, and then bind the body's onload event to the picHook() function. You can also realize a large image pop-up on your page when you click on the image.

There is still a little bug, mainly because I am not very familiar with CSS, which makes the div style a bit ugly.

I declare the css style directly in js, so I don’t need to create another css file.

Wait until this section is over before thinking about the css and optimizing the style. I hope that the knowledge shared in this article about using JavaScript to implement image pop-up windows instead of saving them will be helpful to you.