<! DOCTYPE html> <ptml> <pead> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "> <title> pop-up Layer, window effect + drag function </title> <style type=" Text/css "> *{margin:0px ;} body{font-size:12px font:arial, Helvetica, Sans-serif; margin:25px 0PX; background: #eee;} . botton{color: #F00; cursor:pointer;} mybody{width:600px margin:0 Auto; height:1500px border:1px solid #ccc padding:20px 25px background: #fff} #cwxBg {pos Ition:absolute; Display:none; Background: #000; width:100%; height:100%; left:0px; top:0px; z-index:1000;} #cwxWd {position:absolute; display:none; border:10px solid #CCC; Padding:10px;background: #FFF; z-index:1500;} #cwxCn {background: #FFF; display:block;} . imgd{width:400px; height:300px;} </style> </pead> <body> <!--pop-up window--> <div class= "Mybody" > <div class= "Botton" id= "test Click > Click Test </div> asdasdasdasdasdasdasd here is a piece of text Oh! <div class= "Botton" id= "TestClick1"> Click Test </div> </div> <script type=" Text/javascript "> C $ (' Testclick '). onclick = function () {var nei Rong = ' <div></div> '; Cwxbox.box.show (Neirong); C $ (' TestClick1 '). onclick = function () {var neirong = ' 123456789132456789 '; Cwxbox.box.show (neirong,3); Function C $ (ID) {return document.getElementById (ID);} Defines the form object var cwxbox = {}; Cwxbox.box = function () {var bg,wd,cn,ow,oh,o = True,time = null; return {show:function (c,t,w,h) {if (o) {bg = document.createelement (' div '); bg.id = ' cwxbg '; WD = document.createelement (' div '); wd.id = ' cwxwd '; cn = document.createelement (' div '); cn.id = ' CWXCN '; Document.body.appendChild (BG); Document.body.appendChild (WD); Wd.appendchild (CN); Bg.onclick = Cwxbox.box.hide; Window.onresize = This.init; Window.onscroll = This.scrolls; o = false; } if (w && h) {var inhtml = ' <iframe src= ' + C + ' "width=" ' + W + ' "height=" ' + H + ' "" frameborder= "0" ></if Rame> '; }else{var inhtml = C; } cn.innerhtml = inhtml; Oh = THIS.GETCSS (wd, ' offsetheight '); ow = THIS.GETCSS (wd, ' offsetwidth '); This.init (); This.alpha (bg,50,1); This.drag (WD); if (t) {time = settimeout (function () {cwxbox.box.hide ()},t*1000); }, Hide:function () {cwxbox.box.alpha (wd,0,-1); Cleartimeout (time); }, Init:function () {bg.style.height = Cwxbox.page.total (1) + ' px '; Bg.style.width = '; Bg.style.width = cwxbox.page.total (0) + ' px '; var h = (Cwxbox.page.height ()-OH)/2; Wd.style.top= (H+cwxbox.page.top ()) + ' px '; Wd.style.left= (Cwxbox.page.width ()-ow)/2+ ' px '; }, Scrolls:function () {var h = (Cwxbox.page.height ()-OH)/2; Wd.style.top= (H+cwxbox.page.top ()) + ' px '; }, Alpha:function (e,a,d) {clearinterval (e.ai); if (d==1) {e.style.opacity=0; E.style.filter= ' alpha (opacity=0) '; E.style.display = ' block '; } e.ai = SetInterval (function () {cwxbox.box.ta (e,a,d)},40); }, Ta:function (e,a,d) {var anum = Math.Round (e.style.opacity*100); if (Anum = = a) {clearinterval (e.ai); if (d = = 1) { E.style.display = ' None '; if (e = = wd) {This.alpha (bg,0,-1); }}else{if (e = bg) {This.alpha (wd,100,1); }}else{var n = Math.ceil ((anum+ ((a-anum) *.5))); n = n = = 1? 0:n; e.style.opacity=n/100; E.style.filter= ' alpha (opacity= ' +n+ ') '; }, Getcss:function (e,n) {var e_style = E.currentstyle? E.currentstyle:window.getcomputedstyle (E,null); if (E_style.display = = ' None ') {var clondom = E.clonenode (true); ClonDom.style.cssText = ' Position:absolute; Display:block; top:-3000px; '; Document.body.appendChild (Clondom); var wh = clondom[n]; ClonDom.parentNode.removeChild (Clondom); return WH; return e[n]; }, Drag:function (e) {var startx,starty,mouse; Mouse = {Mouseup:function () {if (e.releasecapture) {e.onmousemove=null; E.onmouseup=null; E.releasecapture (); }else{Document.removeeventlistener ("MouseMove", mouse.mousemove,true); Document.removeeventlistener ("MouseUp", mouse.mouseup,true); }, Mousemove:function (EV) {var oevent = ev| | Event E.styLe.left = Oevent.clientx-startx + "px"; E.style.top = Oevent.clienty-starty + "px"; } E.onmousedown = function (ev) {var oevent = ev| | Event StartX = Oevent.clientx-this.offsetleft; Starty = Oevent.clienty-this.offsettop; if (e.setcapture) {e.onmousemove= mouse.mousemove; E.onmouseup= Mouse.mouseup; E.setcapture (); }else{Document.addeventlistener ("MouseMove", mouse.mousemove,true); Document.addeventlistener ("MouseUp", mouse.mouseup,true); }}} () Cwxbox.page = function () {return{top:function () {return document.documentelement.scrolltop| | Document.body.scrollTop}, Width:function () {return self.innerwidth| | document.documentelement.clientwidth| | Document.body.clientWidth}, Height:function () {return self.innerheight| | document.documentelement.clientheight| | Document.body.clientHeight}, Total:function (d) {var b=document.body, e=document.documentelement; Return d? Math.max (Math.max (b.scrollheight,e.scrollheight), Math.max (b.clientheight,e.clientheight)): MaTh.max (Math.max (b.scrollwidth,e.scrollwidth), Math.max (B.clientwidth,e.clientwidth))}}} () </script> </ Body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
