Last Update:2017-08-24
Source: Internet
Author: User
Keywords
Web page production
Ajax
javascript
<! 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=" HTML; Charset=utf-8 "/> <title> Untitled Document </title> <head> <title> Web page Pop-up small window, the page background gradually become translucent </title> <style> html,body{font-size:12px;margin:0px;height:100%} . Meswindow{border: #666 1px solid;background: #fff;} . Meswindowtop{border-bottom: #eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left; font-size:12px; . meswindowcontent{margin:4px;font-size:12px} Meswindow close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:# FFF} </style> <script> var isie= (document.all)? True:false; //Set the visible state of the Select function Setselectstate (state) { var objl=document.getelementsbytagname (' select '); for (var i=0;i<objl.length;i++) { objl[i].style.visibility=state; } } function mouseposition (EV) { if (Ev.pagex | | ev.pagey) { return {x:ev.pagex, y:ev.pagey}; } return { X:ev.clientx + document.body.scrollleft-document.body.clientleft,y:ev.clienty + document.body.scrollTop- Document.body.clientTop }; } //Pop-up method function ShowMessageBox (wtitle,content,pos,wwidth) { CloseWindow (); var bwidth=parseint (document.documentElement.scrollWidth); var bheight=parseint (document.documentElement.scrollHeight); if (Isie) { setselectstate (' hidden ');} var back=document.createelement ("div"); back.id= "Back"; var stylestr= "Top:0px;left:0px;position:absolute;background: #666; width:" +bwidth+ "Px;height:" +bHeight+ "PX;"; stylestr+= (Isie)? Filter:alpha (opacity=0); ":" opacity:0; "; Back.style.csstext=stylestr; Document.body.appendChild (back); Showbackground (back,50); var mesw=document.createelement ("div"); mesw.id= "Meswindow"; mesw.classname= "Meswindow"; Mesw.innerhtml= "<div class= ' meswindowtop ' ><table width= ' 100% ' height= ' 100% ' ><tr><td> ' + Wtitle+ "</td><td style= ' width:1px; ><input type= ' button ' onclick= ' CloseWindow (); ' title= ' Closes the window ' class= ' close ' value= ' closes '/></td></tr ></table></div><div class= ' meswindowcontent ' id= ' meswindowcontent ' > ' +content+ ' </div> <div class= ' meswindowbottom ' ></div> '; stylestr= "Left:" + ((pos.x-wwidth) >0)? pos.x-wwidth):p os.x) + "Px;top:50px;position:absolute;width:" +wwidth+ "PX;"; Mesw.style.csstext=stylestr; Document.body.appendChild (MESW); } //Let the background darken function Showbackground (obj,endint) { if (Isie) { obj.filters.alpha.opacity+=1; if (obj.filters.alpha.opacity<endint) { settimeout (function () {showbackground (obj,endint)},5); } }else{ var al=parsefloat (obj.style.opacity); al+=0.01; Obj.style.opacity=al; if (al< (endint/100)) {settimeout (function () {showbackground (obj,endint)},5); } } //Close window function CloseWindow () { if (document.getElementById (' Back ')!=null) { document.getElementById (' Back '). Parentnode.removechild (document.getElementById (' Back ')); } if (document.getElementById (' Meswindow ')!=null) { document.getElementById (' Meswindow '). Parentnode.removechild (document.getElementById (' MesWindow ')); } if (Isie) { setselectstate ("); } //Test popup function Testmessagebox (EV) { var objpos = mouseposition (EV); messcontent= "<div style= ' padding:20px 0 20px 0;text-align:center ' > Message body </div>"; showmessagebox (' Please select the following area ', messcontent,objpos,350); } </script> </head> <body> <div style= "Text-align:left" ><a href= "#none" onclick= "Testmessagebox" (event); > Pop-up windows </a></div> </body> </html>