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

<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> <div class="mybody"> <div class="botton" id="testclick">点击测试</div> asdasdasdasdasdasdasd这里是一段文字哦！<div class="botton" id="testclick1">点击测试</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);} //定义窗体对象 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 = ''; }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)) } } }()
[ctrl+a 全选 注:引入外部js需再刷新一下页面才能执行]