【JS功能】前端实现可拖拽弹出框功能

最新推荐文章于 2024-04-28 10:47:20 发布

旺旺大力包

最新推荐文章于 2024-04-28 10:47:20 发布

阅读量263

点赞数 3

分类专栏：笔记合集 JavaScript CSS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/leoxingc/article/details/137090678

版权

JavaScript 同时被 3 个专栏收录

16 篇文章 30 订阅

订阅专栏

CSS

10 篇文章 3 订阅

订阅专栏

笔记合集

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
    }
    .cover {
      position: fixed;
      width: 100%;
      height: 100%;
      background: #b6bbc0;
      padding: 0px;
      margin: 0px;
      display: none;
    }
    .layer {
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 500px;
      height: 300px;
      background: cornflowerblue;
    }
    .title {
      text-align: center;
      height: 30px;
      background: #006666;
      cursor: move;
    }
    .closeBtn {
      position: absolute;
      bottom: 5px;
    }
    #btn {
      position: absolute;
    }
  </style>
  <script type="text/javascript">
    window.onload = function () {
      //模态窗口

      var title = document.querySelector(".title");
      var _layer = document.querySelector(".layer");

      console.log(title);

      var btn = document.getElementById("btn");
      btn.onclick = function () {
        document.querySelector(".cover").style.display = "block";
      };

      var closebtn = document.querySelector(".closeBtn");
      closebtn.onclick = function () {
        document.querySelector(".cover").style.display = "none";
      };

      // 拖拽

      title.onmousedown = function (event) {
        //计算鼠标当前和窗口左上角的距离
        //				var disX = event.offsetX;
        //				var disY = event.offsetY;

        //鼠标的坐标 减去 layer
        // 记录鼠标在元素内的偏移量
        var disX = event.clientX - _layer.offsetLeft;
        var disY = event.clientY - _layer.offsetTop;
        // 移动
        document.onmousemove = function (ev) {
          _layer.style.margin = "0px"; //要把 auto  去掉

          _layer.style.left = ev.pageX - disX + "px";
          _layer.style.top = ev.pageY - disY + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = null;
        };
      };
    };
  </script>
  <body>
    <input type="button" name="btn" id="btn" value="弹出对话框" />

    <div class="cover">
      <div class="layer">
        <div class="title">窗口标题</div>
        <button class="closeBtn">关闭</button>
      </div>
    </div>
  </body>
</html>