JavaScript-based image click pop-up window instead of saving _ javascript skills

This article mainly introduces the JavaScript-based pop-up window for image clicking instead of saving the relevant information. If you need it, you can refer to the plug-in that you have always wanted to install a thumbnail clicking pop-up, however, I found that php is used almost all of them. The use and installation of plug-ins are extremely cumbersome. So I checked some demos online and implemented a pure js image pop-up plug-in.

The implementation idea is to compile the onclick event function of the hook image, append the p element to the body in the function, put the passed image object into the element, and listen to the onclilck event of p, when the click is captured, close (actually hidden) the pop-up p.

By collecting all the img elements on the page during function initialization, you can add the onclick = "picHook (this)" attribute to each img element so that when an image is clicked, this function can automatically create a p mask background, obtain the width and height of the clicked image, and generate a new p with the same size as the image to display the image. When the mask is clicked again, the hook event returns again and sets the style of the mask and image p to none. The pop-up image is closed.

It's easy to say. It's easier to do it, simply by using only one function.

Talking is cheap, show you my code:

Script function picHook (pic) {/* image object */var imgs = document. getElementsByTagName ("img");/* foreground p */var light = document. getElementById ('light') | document. createElement ("p");/* Background p */var bg = document. getElementById ('bg ') | document. createElement ("p");/* zoom in the image */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_p {\ 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
Save this code in the head of the page, and then bind the onload event of the body to the picHook () function. You can click the picture to bring up a large image.
There is still a small bug, mainly because I am not familiar with css, resulting in a little ugly p style.
I directly declare the css style in js, so that I don't need to create another css file.
After this section, I will ponder over css and optimize the style. We hope that the JavaScript implementation image that we will share with you in this article can be clicked in the pop-up window, instead of saving the relevant knowledge to help you.