JavaScript implementation Picture Click Popup

Always want to install a thumbnail click Pop-up plug-in, but looked for almost all are used PHP to do, plug-in use and installation is extremely cumbersome, so the Internet to check some demo, their own implementation of a pure JS picture pop-up plugin.

The realization of the idea is to write the hook image of the onclick event function, in the function of the body to append the div element, and then put the incoming picture object into the element, and then listen to the Div onclilck event, when the capture to click, and then close (in fact, hidden) pop-up Div.
By collecting all the IMG elements of the page at function initialization and adding onclick= "Pichook (This)" to each IMG element, this function automatically creates the div mask background when the image is clicked, and gets the width and height of the clicked image. Create a new div with the same size as the picture to display the picture. When the mask is clicked again, the hook event responds again, and the mask and picture Div's style is set to none, and the pop-up image is closed.
Achieve the effect see this blog, any click on a picture to see the effect.
It's easy to say, it's easier to do, and it's simple enough to be done with just one function.
Talking is cheap,show your My Code:

        <Script>        function Pichook(pic){        / * Picture Object * /        varIMGs= Document.getElementsByTagName("img");        / * Foreground div*/        varLight= Document.getElementById(' Light ')|| Document.createelement("Div");        / * Background div*/        varBg= Document.getElementById(' BG ')|| Document.createelement("Div");        / * Picture magnification * /        varS_pic= Document.getElementById(' S_pic ')|| Document.createelement("img");        /*css Object * /        varCss= Document.createelement("Style");        /*css style * /        varCsstext= '\. pic_bg{\position:absolute;\margin:0 auto; \top:0%;\left:0%;\right: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: -%;            Top: -%;            width:  -%;Padding-Top:25px;Margin- Left:-250px;Margin-Top:-100px;Z-Index:1002;        }';        / * Collect all Picture objects on the page * /         for(I=0;I<IMGs.length;I++){Imgs[i].SetAttribute("onclick", "Pichook (This)");        }        CSS.type = "Text/css";                / * Close image * /        if(!PIC){            BG.style.Display =  Light.style.Display = "None";        }                /*ie compatible * /        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);        S_pic.SetAttribute("width","70%");        S_pic.SetAttribute("Height","65%");        S_pic.SetAttribute("Margin","0 Auto");        S_pic.style.Display = ' Block ';         Light.SetAttribute("id", "Light");         Light.SetAttribute("Class", "Pic_div");         Light.style.Display = ' Block ';         Light.appendchild(S_pic);         Light.SetAttribute("onclick", "Pichook ()");        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 piece of code in the head of the page, and then bind the body's onload event to the Pichook () function, and your page will also be able to click the image to pop up a larger image.
There is a small bug, mainly because I am not familiar with CSS, resulting in the style of the div is a bit ugly.
CSS style I was directly declared in the JS, so that there is no need to create another CSS file.
Obsessive-compulsive disorder, no way.
When you have time to ponder over CSS, optimize the style.

JavaScript implementation Picture Click Popup