弹出框的基础实现拖动的模态框弹出框，也称为模态框点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层点击关闭按钮，

拖动的模态框

弹出框，也称为模态框

设计逻辑

点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层
点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层
鼠标放到模态框最上面一行，可以按住拖动模态框在页面中移动
鼠标松开，可以停止拖动模态框移动

code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body class="grey">
    <div class="login-header">
      <a href="" class="link">点击，弹出登录框</a>
    </div>
    <div id="login">
      <div id="title">登录会员</div>
      <form action="">
        <input type="text" class="login-items" placeholder="请输入用户名" />
        <input
          type="password"
          name=""
          id=""
          class="login-items"
          placeholder="请输入登录密码"
        />
        <button type="submit" class="login-items" id="login-btn">登录</button>
        <div id="close-btn">关闭</div>
      </form>
    </div>
  </body>
</html>

javascript 部分

<script>
      var close_btn = document.querySelector("#close-btn");
      var login = document.querySelector("#login");
      var body = document.querySelector("body");
      close_btn.addEventListener("click", function () {
        body.className = "";
        login.style.display = "none";
      });
      var title = document.querySelector("#title");
      title.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>