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

2019-11-20 11:31:19

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现可拖曳、可关闭的弹窗效果。分享给大家供大家参考。具体如下：

运行该实例，点击文字，弹出一个窗口，其实是一个弹出层，这个弹出层可以随鼠标拖曳，另外，示例演示了用本方法弹出文字层和弹出图片层的具体代码，请根据选择使用哦。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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="//www.VeVB.COm/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程序设计有所帮助。

上一篇：angularjs学习笔记之三大模块（modal，controller，view）

下一篇：JS实现网页Div层Clone拖拽效果