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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
vue构建单页面应用实战
Apr 10 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
python re模块和正则表达式
2021/03/24 Python
会计系毕业个人自荐信格式
2013/09/23 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
会议接待欢迎标语
2014/10/08 职场文书
担保贷款承诺书
2015/04/30 职场文书
小学课改工作总结
2015/08/13 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android