js点击弹出div层实现可拖曳的弹窗效果

<！DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>弹出层、弹窗效果+拖曳功能 </title> <style type="text/css"> *{ margin:0px; padding: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{ position: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> </head> <body> 点击测试 asdasdasdasdasdasdasd这里是一段文字哦！点击测试<script type="text/javascript"> C$（"testClick"）.onclick = function（）{ var neirong = "<img src="/images/logo.gif" class="imgd" />"; cwxbox.box.show（neirong）; } C$（"testClick1"）.onclick = function（）{ var neirong = "123456789132456789"; cwxbox.box.show（neirong,3）; } function C$（id）{return document.getElementById（id）;} //定义窗体对象 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"></iframe>"; }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> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]