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 相关文章推荐
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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/25 PHP
教大家制作简单的php日历
2015/11/17 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
合作协议书怎么写
2014/04/18 职场文书
教师节标语大全
2014/10/07 职场文书
公司2015年终工作总结
2015/05/26 职场文书