JavaScript Based image click on the pop up window rather than save

1 always want to install a thumbnail click pop-up plug-in, but found almost all use php to do, the use and installation of the plug-in is extremely tedious, so I looked up some demo online, I realized a pure js image pop-up plug-in.

The idea is to write the function of onclick event of hook image, append div element to body in the function, put the passed image object into the element, listen to onclilck event of div at the same time, and close (actually hide) the div that pops out when it is caught.

Initialized by the function of collecting all img page elements, for each img element increase onclick = "picHook (this)" this article attributes, such as the picture, when clicked, this function can automatically create div mask background, and obtain the width and height by click on the image, at the same time to generate a new, and the size of the picture 1 samples div to display images. When the mask is clicked again, the hook event responds again and sets the mask and style of image div to none, and the popup image is turned off.

Simple enough to say, but even simpler to do, as simple as 1 function to implement.

talking is cheap, show you my code:

<script>
function picHook(pic){
/* Image objects */
var imgs = document.getElementsByTagName("img");
/* prospects div*/
var light = document.getElementById('light') || document.createElement("div");
/* background div*/
var bg = document.getElementById('bg') || document.createElement("div");
/* zoom */
var s_pic = document.getElementById('s_pic') || document.createElement("img");
/*css object */
var css = document.createElement("style");
/*css style */
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;\
}';
/* Collect all image objects on the page */
for(i=0; i<imgs.length;i++){
imgs[i].setAttribute("onclick", "picHook(this)" );
}
css.type = "text/css";

/* Close the image */
if( !pic ){
bg.style.display = light.style.display = "none";
}
/*ie Compatible with */
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 head and bind body's onload event to the picHook() function, and you can click to pop up a larger image on your page.

There is still a little bug, mainly because I am not familiar with css, so the style of div is a little ugly.

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

After this section, I will consider css and optimize the style. I hope the JavaScript implementation pictures I shared with you in this article will help you by clicking on pop-ups instead of saving them.