Click the pop-up window for Images Based on JavaScript instead of saving. The javascript pop-up window

Click the pop-up window for Images Based on JavaScript instead of saving. The javascript pop-up window

I always wanted to install a thumbnail and click the plug-in to pop up. However, I found that php is used almost all of them. The use and installation of plug-ins were extremely cumbersome, so I checked some demos online, you have 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 div element to the body in the function, put the imported image object into the element, and listen to the onclilck event of the div, when a click is captured, the pop-up div is closed (actually hidden.

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 automatically creates a div background, obtains the width and height of the clicked image, and generates a new div of 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 div 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 div */var light = document. getElementById ('light') | document. createElement ("div");/* Background div */var bg = document. getElementById ('bg ') | document. createElement ("div");/* zoom in the image */var s_pic = document. getElementById ('s _ pic ') | document. createElement ("img");/* css object */var css = document. createElement ("style");/* css style */v Ar 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 

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, which makes div styles a little ugly.

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.

Articles you may be interested in:

• Click an image in jsp to bring up the file upload interface and implement the preview function.
• Click the link in javascript to bring up "Save image as" instead of opening it directly.
• Js to copy text or images to the clipboard after clicking
• JS allows you to enlarge and close click images on the current page.
• Js click to change the background color or image instance code
• JavaScript code for switching images by clicking arrows
• JS click the image to change the image path and use a regular expression to retrieve the image name Code
• Javascript Continuous Image scrolling and clickable