Implement pictures based on JavaScript to click on pop-up windows instead of saving _javascript tips

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

The realization of the idea is by writing the hook picture of the OnClick event function, in the function of the body to append div elements, and then the incoming picture object into the element, and then listen to the Div onclilck event, when the capture to click, then close (actually hidden) pop-up Div.

By collecting all the IMG elements of the page when the function is initialized, and then adding the onclick= "Pichook" attribute to each IMG element so that when the picture is clicked, this function automatically creates the div mask background 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 are set to none, and the pop-up image is closed.

It's simple to say, it's simpler to do, it's simple enough to need just one function.

Talking is cheap,show your My Code:

<script> function Pichook (pic) {/* Picture object/var IMGs = document.getElementsByTagName ("img");/* Foreground div*/var light = doc Ument.getelementbyid (' light ') | |
Document.createelement ("div"); /* Background div*/var bg = document.getElementById (' bg ') | |
Document.createelement ("div"); /* Picture Amplification * * 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%;\ Om: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-ind
Ex:1002;\} '; * * Collection page all picture objects/for (i=0; i

This code is saved in the head of the page, and then the body of the OnLoad event binding to the Pichook () function, your page can also achieve picture click Pop-up Big picture.

There is a small bug, mainly because I am not familiar with CSS, resulting in the style of Div is a bit ugly.

CSS style I was directly declared in the JS, so that no longer create a separate CSS file.

After this section and then pondering over the CSS, optimize the next style. I hope this article to share the JavaScript implementation picture Click pop-up window rather than save the relevant knowledge can help everyone.