This article is mainly to click on the pop-up Layer Effect & pop-up window after the background dimming effect of the implementation code is introduced, need friends can come to the reference, I hope to help you.
Code as follows: <html> <head> <title> Web Effects-Window effects-pop-up windows after the background darkened effect of the </title> <meta http-equiv= " Content-type "content=" text/html;charset=gb2312 > <!--Add the following code to <head> and </head>--> <style Type= "Text/css" > black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%; Background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha (opacity=80);} . white_content{display:none;position:absolute;top:25%;left:25%;width:50% height:50%;p adding:16px;border:3px Solid Orange;background-color:white;z-index:1002;overflow:auto;} </style> </head> <body> <!--Add the following code between <body> and </body>--> <a href= "javascript: void (0) "onclick=" document.getElementById (' Light '). style.display= ' block '; document.getElementById (' fade '). style.display= ' block ' > click here to open the window </a> <div id= "Light" class= "White_" Content "> <a href=" javascript:void (0) "onclick=" document.getElementById (' Light '). style.display= ' None ';Document. getElementById (' fade '). style.display= ' None ' > close</a> <br> window content </div> <div id= "Fade" class = "Black_overlay" >123</div> </body> </html> Example two: code as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head runat=" Server "> <title> Untitled page </title> <script language= "javascript" type= "Text/javascript" > function hid () &nbs P { , var Div4=document.getelementbyid ("Div1"); D iv4.style.display= "Block"; div4.style.width= "200px"; div4.style.height= "150px"; div4.style.zindex= "9999"; div4.style.top= "43%"; div4.style.left= "43%"; &NBSP div4.style.position= "absolute"; var Div3=document.getelementbyid ("Div2"); div3.style.display= "block"; div3.style.width= "1000px"; div3.style.zindex= "9998"; div3.style.position= "absolute"; div3.style.height=document.body.offsetheight; div3.style.top= "0px"; div3.style.left= "0px"; } function vis () { &NBSP ; var Div4=document.getelementbyid ("Div1"); div4.style.display= "None"; var Div3=document.getelementbyid ("Div2"); div3.style.display= "None"; div3.style.width= "0px"; div3.style.height= "0px"; &NBsp Div4.innerhtml= "<a onclick= ' Vis () ' style= ' display:block ' id= ' text ' > click Close </a><br/><br Input name= ' TextBox2 ' type= ' text ' id= ' TextBox2 '/><br/><input ' id= ' Button3 ' type= ' button ' value= ' button ' Onclick= ' return Button3_onclick () '/> '; } </script> </head> <body style= "width:100%; height:100% "> <div align=" center "> <table width=" 768 "border=" 0 "cellpadding=" 0 "cellspacing=" 0 " > <!--dwlayouttable--> <tr> <TD width= "768" height= "403 "> <form id=" Form1 "runat=" Server "> <a onclick=" hid () "> Click to show </a><br/ > <div style= "color:white; Background-color:green; Display:none "id=" Div1 "> <a onclick=" Vis () "style=" display : Block "id=" text > click Close </A><br/> <br/> <asp:textbox id= "TextBox2" runat= "Server" ></asp:textbox><br/& Gt <input id= "Button3" type= "button" value= "button" onclick= "return Button3_onclick ()"/></div> <div style= "filter: Alpha (opacity=70); width:1px; height:8px; Background-color: #cccccc; left:0px; Position:absolute; top:0px; z-index:9998; Display:none "id=" Div2 "> </div> </FORM></TD> ; </tr> </table> </div> </body> </html> Case Three: The code is as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html XMLns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= " Content-type "content=" text/html; charset=gb2312 "/> <title> Click popup Layer effect </title> <style> & nbsp * {margin:0} body {font-size:12px;} #container div{margin-top:5px; #select_city H3{float:left} #main_city, #all_province {clear:both} #main_city Div, #all_province div{width:600px;clear:left} #main_city H4, #all_ Province h4{float:left;display:inline;font-size:16px} #main_city div span, #all_province div span{ margin:0 10px;cursor:pointer;font-size:12px;} #float_lay {width:200px;height:120px;border:1px #d1d1d1 solid;position:absolute;background: #fff ; z-index:999;display:none;} </style> <script type= "Text/javascRipt "> //pop-up layer function Openlayer (Objid,conid) { var Arraypag Esize = getpagesize ()//Call GetPageSize () function var arraypagescroll = Getpagescroll ();// Call Getpagescroll () function if (!document.getelementbyid ("popupaddr")) { // Create pop-up content layer var popupdiv = document.createelement ("div"); //set properties and styles for this element popupdiv.setattribute ("id", "popupaddr") & nbsp popupdiv.style.position = "absolute"; popupdiv.style.border = "1px solid #ccc"; popupdiv.style.background = "#fff"; popupdiv.style.zindex = 99; //Create Popup background level var bodyback = document.create Element ("div"); bodyback.setattribute ("id", "BODYBG") &nBsp bodyback.style.position = "absolute"; bodyback.style.width = "100%"; bodyback.style.height = (arraypagesize[1] + + ' px '); bodyback.style.zindex = 98; bodyback.style.top = 0; bodyback.style.left = 0; bodyback.style.filter = "alpha (opacity=50)"; bodyback.style.opacity = 0.5; bodyback.style.background = "#ddf"; //implementation popup (after inserting to target element) var mybody = document.getElementById (ObjID); insertafter (popupdiv,mybody)//executive function InsertAfter () insertafter ( Bodyback,mybody)//executive function InsertAfter () } //display background level document.getElementById ("BODYBG"). Style.display = ""; //display content layer   var Popobj=document.getelementbyid ("Popupaddr") popobj.innerhtml = document.getElementById (Conid). InnerHTML; PopObj.style.display = ""; //Let the pop-up layer vertically and horizontally in the page (Unified) //popObj.style.width = "600px"; //popObj.style.height = "400px"; //popObj.style.top = arraypagescroll[1] + (arraypagesize[3]-35-400)/2 + ' px '; //PopObj.style.left = (arraypagesize[0]-20-600)/2 + ' px '; //Let the pop-up layer vertically and horizontally in the page (personality) var arrayconsize=getconsize (Conid) Pop Obj.style.top = arraypagescroll[1] + (arraypagesize[3]-arrayconsize[1])/2-50 + ' px '; PopObj.style.left = (arraypagesize[0]-arrayconsize[0])/2-30 + ' px '; &NBSP //get content layer content raw size function getconsize (Conid) { &nbs P;var Conobj=document.getelementbyid (cOnid) conobj.style.position = "absolute"; conobj.style.left=-1000+ "px"; conobj.style.display= ""; var Arrayconsize=[conobj.offsetwidth,conobj.offsetheight] Conobj.style.display= "None"; return arrayconsize; &NBSP} function InsertAfter (newelement,targetelement) {//insert var pa Rent = Targetelement.parentnode; if (Parent.lastchild = targetelement) { parent.appendchild (newelement); nbsp } else{ parent.insertbefore (newelement, targetelement.nextsibling); } &NBSP} //get the height of the scrollbar function Getpagescroll () { VAR yscroll; if (self.pageyoffset) { yscroll = self.pageyoffset &NBSp } else if (document.documentelement && document.documentElement.scrollTop) { Yscroll = Document.documentElement.scrollTop; } else if (document.body) { yscroll = document.body.scrollTop; &nbs P } Arraypagescroll = new Array (', yscroll) return arraypagescroll; &NBSP //get page actual size function getpagesize () { var Xscroll,yscroll; if (window.innerheight && window.scrollmaxy) { xscroll = doc Ument.body.scrollWidth; yscroll = window.innerheight + window.scrollmaxy; } else if (Document.body.scrollHeight > Document.body.offsetHeight) { &NBSP;SS Croll = Document.body.scrollWidth; yscroll = document.body.scrollHeight;   } else { xscroll = document.body.offsetWidth yscroll = Document.body.offsetHeight; } var windowwidth,windowheight; //var pageheight,pagewidth; if (self.innerheight) { windowwidth = self.innerwidth &NBSP ; windowheight = Self.innerheight; } else if (document.documentelement && document.documentElement.clientHeight) { &NBSP ; windowwidth = document.documentElement.clientWidth; windowheight = document.documentElement.clientHeight; } else if (document.body) { windowwidth = document.body.clientWidth;   ; windowheight = document.body.clientHeight; } var pagewidth,pageheight &NBSp if (Yscroll < WindowHeight) { pageheight = windowheight; } else { pageheight = Yscroll; } if (Xscroll < windowwidth) { pagewidth = WINDOWWI Dth } else { pagewidth = Xscroll; } Arraypagesize = new Array (pagewidth,pageheight,windowwidth,windowheight) return arraypagesize; &NBSP} //off popup level function Closelayer () { document . getElementById ("Popupaddr"). Style.display = "None"; document.getElementById ("BODYBG"). Style.display = "None"; return false; &NBSP;} </script> </head> <body& Gt <input name= "input" id= "test"Value= "type=" button "onclick=" Openlayer (' Test ', ' Test_con ') "/> <!--the first pop-up layer content--> <div id= "Test_con" style= "Display:none" title= "containers containing pop-up content" > <div id= " tab "> <div id=" Tabtop "> <div id=" tabtop-l "><strong> style settings </strong></div> <div id= "Tabtop-r" onclick= "Closelayer ()" >< Strong> off </strong></div> </div> <div id= "Tabcontent" > Show content </div> </div> </div> <br> <br> <br> <input name= "input" id= "test2" value = "style hint" type= "button" onclick= "Openlayer (' test2 ', ' test_con2 ')"/> <!--second pop-up layer content--> <div id= "Test_con2" style= "display:none" titLe= "container for content containing pop-up layer" > <div id= "tab2" > <div id= "TABTOP2" > <div id= "tabtop-l2" ><strong style= "Color:blue" > Setting hints </strong></div> <div id= "tabtop-r2" onclick= "Closelayer ()" ><strong style= "color:red" > Close </ strong></div> </div> <div id= "Tabcontent2" style= "COLOR: #dff ; Background: #000 "> <p> here show tip" <p> hint 1 &NBSP;<P > Tip 2 </div> </div> </div> & nbsp;<br> 1<br> <br> <input name= "input "Id=" test3 "value=" style demo "type=" button "onclick=" Openlayer (' test3 ', ' Test_con3 ') "/> <!-- The content of the third pop-up layer--> <div id= "Test_con3" style= "DIsplay:none "Title=" contains the contents of the pop-up layer of the container "> <div id=" tab3 "style=" width:300px;height:180px; Background: #fee "> <div id=" TABTOP3 "> <div id=" Tabtop-l3 ">< Strong style= "color:red;font-size:20px" > Style demo </strong></div> <div Id= "Tabtop-r3" onclick= "Closelayer ()" ><strong> close </strong></div> </div > <div id= "Tabcontent3" > here Show content </div> </div> & nbsp;</div> </body> </html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
