JavaScript实现拖动对话框效果的实现代码


Posted in Javascript onOctober 12, 2020

代码实现:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      top: 0;
    }
    
    .login-btn {
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      text-align: center;
      margin: 100px auto;
      background-color: #1E1E1E;
      color: white;
      border-radius: 50%;
    }
    
    .login-btn:hover {
      cursor: pointer;
      background-color: #323233;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
    }
    
    .bg {
      display: none;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .4);
    }
    
    .login {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 200px;
      background-color: #1E1E1E;
      box-shadow: 4px 4px 15px rgba(0, 0, 0, .3);
    }
    
    .hd {
      position: relative;
      width: 100%;
      height: 26px;
      background-color: #323233;
    }
    
    .hd:hover {
      cursor: move;
    }
    
    .close {
      position: absolute;
      top: 3px;
      right: 5px;
      width: 20px;
      height: 20px;
      background-color: red;
      text-align: center;
      line-height: 20px;
      border-radius: 50%;
      box-shadow: 0 0 5px rgba(0, 0, 0, .7) inset;
    }
    
    .close:hover {
      background-color: yellow;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="login-btn">点击</div>
  <div class="bg"></div>
  <div class="login">
    <div class="hd">
      <div class="close">×</div>
    </div>
  </div>
  <script>
    // 获取元素
    var btn = document.querySelector('.login-btn');
    var bg = document.querySelector('.bg');
    var login = document.querySelector('.login');
    var close = document.querySelector('.close');
    var hd = document.querySelector('.hd');

    // 按下btn,弹出对话框
    btn.addEventListener('click', function() {
      bg.style.display = 'block';
      login.style.display = 'block';
    });

    // 按下close,关闭对话框
    close.addEventListener('click', function() {
      bg.style.display = 'none';
      login.style.display = 'none';
    });

    hd.addEventListener('mousedown', function(e) {
      // 鼠标按下对话框顶部时,获取鼠标到对话框的距离
      var x = e.pageX - login.offsetLeft;
      var y = e.pageY - login.offsetTop;
      // 鼠标按下并移动时,实时更新对话框的位置
      document.addEventListener('mousemove', move);

      function move(e) {
        login.style.left = e.pageX - x + 'px';
        login.style.top = e.pageY - y + 'px';
      }
      // 鼠标松开时,移除拖拽的动作
      document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', move);
      });
    });
  </script>
</body>

</html>

实现效果:

点击点击按钮,弹出对话框。
按住对话框顶部并移动,实现拖动效果。
点击对话框右上角×,关闭对话框。

JavaScript实现拖动对话框效果的实现代码

到此这篇关于JavaScript实现拖动对话框效果的实现代码的文章就介绍到这了,更多相关js拖动对话框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
js一组验证函数
Dec 20 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
react的hooks的用法详解
Oct 12 #Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 #Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 #Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 #Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 #Javascript
Webpack5正式发布,有哪些新特性
Oct 12 #Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 #Javascript
You might like
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
javascript 写类方式之六
2009/07/05 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
python 切片和range()用法说明
2013/03/24 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
详解python-图像处理(映射变换)
2019/03/22 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
keras:model.compile损失函数的用法
2020/07/01 Python
python openCV自制绘画板
2020/10/27 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
贷款工作证明模板
2015/06/12 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
DE1107机评
2022/04/05 无线电