JS实现模态框

发布时间：2020-06-26 14:48:18 作者：Cherish纯紫
来源：网络阅读：319
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    .login {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      display: none;
      background-color: blue;
      width: 300px;
      height: 200px;

    }

    .login_bg {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .3);
      position: fixed;
      top: 0;
      left: 0;
      display: none;
    }

    .title {
      width: 100%;
      height: 50px;
      cursor: move;
      background-color: #333;
    }
  </style>
  <title>Document</title>
</head>

<body>
  <button>点我</button>
  <div class="login">
    <div class="title">
      <span>关闭</span>
    </div>
  </div>
  <div class="login_bg"></div>

  <script>
    $(function () {
      var login = $('.login');
      var loginBg = $('.login_bg')
      var btn = $('button')
      var close = $('span')
      var title = $('.title')

      btn.click(function () {
        login.css('display', 'block')
        loginBg.css('display', 'block')
      })

      close.click(function () {
        login.css('display', 'none')
        loginBg.css('display', 'none')
      })
      title.mousedown(function (e) {
        let x = e.pageX - title.offset().left
        let y = e.pageY - title.offset().top
        $(document).mousemove(function (e) {
          login.css({ 'transform': 'translate(0)' })
          login.css({ 'left': e.pageX - x + 'px', 'top': e.pageY - y + 'px' })
          $(document).mouseup(function (e) {
            $(document).unbind()
          })
        })
      })
    })

  </script>
</body>

</html>
JS实现模态框

相关阅读
