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


Posted in Javascript onSeptember 26, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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="https://3water.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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
Vue程序调试的方法
Jun 17 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 #Javascript
jQuery超简单选项卡完整实例
Sep 26 #Javascript
angularjs学习笔记之简单介绍
Sep 26 #Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 #Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 #Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 #Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 #Javascript
You might like
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
PHP XML备份Mysql数据库
2009/05/27 PHP
php中几种常见安全设置详解
2010/04/06 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
浅析PHP文件下载原理
2014/12/25 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
python数据抓取3种方法总结
2021/02/07 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
军训自我鉴定200字
2014/02/13 职场文书
亮化工程实施方案
2014/03/17 职场文书
业务员自荐信范文
2014/04/20 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
python中的被动信息搜集
2021/04/29 Python
Golang入门之计时器
2022/05/04 Golang