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 相关文章推荐
简单的js分页脚本
May 21 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
js 概率计算(简单版)
Sep 12 Javascript
Node 自动化部署的方法
Oct 17 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
JS中this的指向以及call、apply的作用
May 06 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 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/06/23 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
php7性能提升的原因详解
2019/10/13 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
PHP7变量处理机制修改
2021/03/09 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
python字符串的方法与操作大全
2018/01/30 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
幼儿园长自我鉴定
2013/10/17 职场文书
医科学校毕业生自荐信
2013/11/09 职场文书
医学生自荐信
2013/12/03 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Golang ort 中的sortInts 方法
2022/04/24 Golang