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

前端技术 2023/09/02 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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.phpstudy.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/4906

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案