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

 更新时间:2015年09月26日 10:45:58   作者:企鹅   我要评论
这篇文章主要介绍了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="//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程序设计有所帮助。

相关文章

  • JS实现继承的几种常用方式示例

    JS实现继承的几种常用方式示例

    这篇文章主要介绍了JS实现继承的几种常用方式,结合实例形式分析了JavaScript继承的四种常见实现方式,包括原型链继承、构造继承、组合继承及寄生组合继承,需要的朋友可以参考下
    2019-06-06
  • JavaScript实现一个空中避难的小游戏

    JavaScript实现一个空中避难的小游戏

    最近利用Javascript实现了一个小游戏,觉着还不错,所以分享给大家,下面这篇文章主要给大家介绍了利用JavaScript实现一个空中避难的小游戏的相关资料,文中给出了完整的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 原生JS实现圣旨卷轴展开效果

    原生JS实现圣旨卷轴展开效果

    本文主要介绍了原生JS实现诏书卷轴展开效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js获取div高度的代码

    js获取div高度的代码

    不错的获取div高度的代码,主要是方便测试一些信息,用到了javascript的offsetHeight属性
    2008-08-08
  • 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下。希望对大家有所帮助
    2014-02-02
  • JavaScript的漂亮的代码片段

    JavaScript的漂亮的代码片段

    记录我看到之后,不得不赞的代码片段。本贴板内容将不断更新,欢迎关注
    2013-06-06
  • 深入浅析javascript继承体系

    深入浅析javascript继承体系

    这篇文章主要介绍了javascript继承体系的相关资料,需要的朋友可以参考下
    2017-10-10
  • 使用JS代码实现点击按钮下载文件

    使用JS代码实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?今天小编给大家分享两种方法实现js实现点击按钮下载文件,需要的朋友参考下吧
    2016-11-11
  • JavaScript 节流函数 Throttle 详解

    JavaScript 节流函数 Throttle 详解

    这篇文章主要为大家详细介绍了JavaScript 节流函数 Throttle,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • js的正则test,match,exec详细解析

    js的正则test,match,exec详细解析

    本篇文章主要是对js的正则test,match,exec进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论