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 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
VSCode launch.json配置详细教程
Jun 18 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 socket方式提交的post详解
2008/07/19 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
在Django框架中编写Contact表单的教程
2015/07/17 Python
Django中url的反向查询的方法
2018/03/14 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Django ORM filter() 的运用详解
2020/05/14 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
Delphi工程师笔试题
2013/09/21 面试题
自荐信的五个重要部分
2013/10/29 职场文书
新闻专业个人求职信
2013/12/19 职场文书
自我评价范文
2013/12/22 职场文书
大学军训感想
2014/02/12 职场文书
第二课堂活动总结
2014/05/07 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
生活小常识广播稿
2015/08/19 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL