JS实现可拖曳、可关闭的弹窗效果_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:37 PM

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  class="imgd lazy"  src="/static/imghw/default1.png"  data-src="http://www.jb51.net/images/logo.gif"  / alt="JS实现可拖曳、可关闭的弹窗效果_javascript技巧" ></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 &#63; 0 : n;
      e.style.opacity=n/100;
      e.style.filter='alpha(opacity='+n+')';
     }
    },
    getCss:function(e,n){
     var e_style = e.currentStyle &#63; 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&#63;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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1666

CakePHP 教程

1425

Laravel 教程

1327

PHP教程

1273

C# 教程

1252

显示更多

Related knowledge

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

新浪新闻速递怎么关闭关闭速递功能的操作步骤 Mar 12, 2024 pm 09:46 PM

　　新浪新闻软件内提供的新闻头条信息非常多，基本上都是官方平台推送的，每一篇新闻文章内容都是拥有真实性的，上下滑动一键搜索翻阅，整体的阅读氛围更加舒适。输入手机号在线登录，不同领域的新闻频道都是开放的，二十四小时更新都是不重复的，国内外、地方时事新闻都不会少的，上下滑动选择一键翻阅，新闻内容都是大家感兴趣的，还能关闭新闻速递功能，这样也不会被影响到，任何时候都可以打开一览，海量热门的新闻头条新鲜事抢先看，现在小编在线详细为新浪新闻用户们带来关闭速递功能的操作步骤。　　找到新浪新闻进入，点击右下角

win10日历事件没有弹窗提醒怎么办? win10日历事件提醒没了的恢复方法 Jun 09, 2024 pm 02:52 PM

日历可以帮助用户们记录下你的行程，甚至还可以设置提醒，但是也有不少的用户们在询问win10日历事件提醒不弹出怎么办？用户们可以先检查一下windows更新情况或者是清除windows应用商店缓存来进行操作就可以了。下面就让本站来为用户们来仔细的介绍一下win10日历事件提醒不弹出问题解析吧。添加日历事件在系统菜单中点击“日历”程序。鼠标左键点击日历中的日期。在编辑窗口输入事件名称和提醒时间，点击“保存”按钮即可添加事件了。win10日历事件提醒不弹出问题解决

抖音私信对方关闭了私信模式怎么打开？私信对方关闭了私信模式能看到吗？ Mar 28, 2024 am 08:01 AM

抖音是一款备受欢迎的短视频社交平台，让用户可以简单地记录生活、分享快乐。私信功能在抖音中扮演着重要的角色，是用户之间互动的主要方式之一。有时候，用户可能会碰到对方关闭了私信模式，导致无法发送消息的情况。一、抖音私信对方关闭了私信模式怎么打开？1.确认对方是否开启了隐私设置首先，我们应该确认对方是否启用了隐私设置，可能已经限制了私信的接收。如果他们设置了仅允许熟人私信，我们可以尝试通过其他途径联系他们，比如通过共同的朋友或在社交媒体平台上进行互动。2.发送好友申请如果对方并未开启隐私设置，那么我们

Windows 11安全中心关闭方法详解 Mar 27, 2024 pm 03:27 PM

在Windows11操作系统中，安全中心是一个重要的功能，它帮助用户监控系统安全状态、防御恶意软件和保护个人隐私。然而，有时候用户可能需要临时关闭安全中心，例如在安装某些软件或进行系统调优时。本文将详细介绍Windows11安全中心的关闭方法，帮助您正确和安全地操作系统。1.如何关闭Windows11安全中心在Windows11中，关闭安全中心并不

快手怎么关闭免密支付快手关闭免密支付方法教程 Mar 23, 2024 pm 09:21 PM

　　快手是一款很卓越的视频播放器，快手中的免密支付功能小伙伴们都非常熟悉，在日常生活中可以给我们很大的帮助，尤其是在平台中购买自己需要的商品时可以更好的去支付，我们现在要去取消掉该如何操作呢?怎么样才能真正有效取消掉免密支付功能?免密支付取消的方法非常简单，具体的操作方法已经整理好了，让我们一起到本站本站中来看整篇攻略吧，希望能够帮助到大家。快手关闭免密支付方法教程　　1、打开快手app，点击左上角的三根横线。　　2、点击快手小店。　　3、在上面的选项栏中，找到免密支付并点击进去。　　4、点击支

Windows安全中心实时保护关闭方法详解 Mar 27, 2024 pm 02:30 PM

Windows操作系统作为全球用户数量最庞大的操作系统之一，一直以来备受用户青睐。然而，在使用Windows系统时，用户们可能会遇到诸多安全隐患，如病毒攻击、恶意软件等威胁。为了强化系统安全，Windows系统内置了许多安全保护机制，其中之一便是Windows安全中心的实时保护功能。今天，我们将会详细介绍Windows安全中心实时保护的关闭方法。首先，让我们

360浏览器推荐的广告如何关闭？如何关闭电脑360浏览器推荐的广告？ Mar 14, 2024 am 09:16 AM

　　360浏览器推荐的广告如何关闭？相信很多的用户们都在使用360浏览器，不过这款浏览器有时候会弹出广告，这就使得很多的用户们都十分的苦恼，下面就让本站来为用户们来仔细的介绍一下如何关闭电脑360浏览器推荐的广告吧。　　如何关闭电脑360浏览器推荐的广告？　　方法一：　　1、打开360安全浏览器。　　2、找到右上角“三横杠”标志，点击【设置】。　　3、在弹出的界面左侧任务栏中找到【实验室】，勾选【启用“360热点资讯”功能】即可。　　方法二：　　1、首先双击

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题