JS实现可拖曳、可关闭的弹窗效果

本文实例讲述了JS实现可拖曳、可关闭的弹窗效果。分享给大家供大家参考。具体如下：
运行该实例，点击文字，弹出一个窗口，其实是一个弹出层，这个弹出层可以随鼠标拖曳，另外，示例演示了用本方法弹出文字层和弹出图片层的具体代码，请根据选择使用哦。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-draw-close-able-alert-dlg-demo/
具体代码如下：

<！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><！--弹出窗--> <div class="mybody"><div class="botton" id="testClick">点击测试</div> asdasdasdasdasdasdasd<br/>这里是一段文字哦！<div class="botton" id="testClick1">点击测试</div> </div> <script type="text/javascript">C$（"testClick"）.onclick = function（）{ var neirong = "<div><img src="http://www.jb51.net/images/logo.gif" class="imgd" /></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 = "<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>

希望本文所述对大家的JavaScript程序设计有所帮助。