功能

  • 点击按钮弹出登录框
  • 将鼠标放在登录框上边，可以拖动

    效果图

    image.png

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.       .login-header {
  10.         width: 100%;
  11.         text-align: center;
  12.         height: 30px;
  13.         font-size: 24px;
  14.         line-height: 30px;
  15.       }
  17.       ul,
  18.       li,
  19.       ol,
  20.       dl,
  21.       dt,
  22.       dd,
  23.       div,
  24.       p,
  25.       span,
  26.       h1,
  27.       h2,
  28.       h3,
  29.       h4,
  30.       h5,
  31.       h6,
  32.       a {
  33.         padding: 0px;
  34.         margin: 0px;
  35.       }
  37.       .login {
  38.         /* 点击之前隐藏 */
  39.         display: none;
  40.         width: 512px;
  41.         height: 280px;
  42.         position: fixed;
  43.         border: #ebebeb solid 1px;
  44.         left: 50%;
  45.         top: 50%;
  46.         background: #ffffff;
  47.         box-shadow: 0px 0px 20px #ddd;
  48.         z-index: 9999;
  49.         transform: translate(-50%, -50%);
  50.         /* 垂直水平居中 */
  51.       }
  53.       .login-title {
  54.         width: 100%;
  55.         margin: 10px 0px 0px 0px;
  56.         text-align: center;
  57.         line-height: 40px;
  58.         height: 40px;
  59.         font-size: 18px;
  60.         position: relative;
  61.         cursor: move;
  62.       }
  64.       .login-input-content {
  65.         margin-top: 20px;
  66.       }
  68.       .login-button {
  69.         width: 50%;
  70.         margin: 30px auto 0px auto;
  71.         line-height: 40px;
  72.         font-size: 14px;
  73.         border: #ebebeb 1px solid;
  74.         text-align: center;
  75.       }
  77.       .login-bg {
  78.         /* 点击之前隐藏 */
  79.         display: none;
  80.         width: 100%;
  81.         height: 100%;
  82.         position: fixed;
  83.         top: 0px;
  84.         left: 0px;
  85.         background: rgba(0, 0, 0, .3);
  86.       }
  88.       a {
  89.         text-decoration: none;
  90.         color: #000000;
  91.       }
  93.       .login-button a {
  94.         display: block;
  95.       }
  97.       .login-input input.list-input {
  98.         float: left;
  99.         line-height: 35px;
  100.         height: 35px;
  101.         width: 350px;
  102.         border: #ebebeb 1px solid;
  103.         text-indent: 5px;
  104.       }
  106.       .login-input {
  107.         overflow: hidden;
  108.         margin: 0px 0px 20px 0px;
  109.       }
  111.       .login-input label {
  112.         float: left;
  113.         width: 90px;
  114.         padding-right: 10px;
  115.         text-align: right;
  116.         line-height: 35px;
  117.         height: 35px;
  118.         font-size: 14px;
  119.       }
  121.       .login-title span {
  122.         position: absolute;
  123.         font-size: 12px;
  124.         right: -20px;
  125.         top: -30px;
  126.         background: #ffffff;
  127.         border: #ebebeb solid 1px;
  128.         width: 40px;
  129.         height: 40px;
  130.         border-radius: 20px;
  131.       }
  132.     </style>
  133.   </head>
  134.   <body>
  135.     <div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框</a></div>
  136.     <div id="login" class="login">
  137.       <div id="title" class="login-title">登录会员
  138.         <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
  139.       </div>
  140.       <div class="login-input-content">
  141.         <div class="login-input">
  142.           <label>用户名:</label>
  143.           <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
  144.         </div>
  145.         <div class="login-input">
  146.           <label>登录密码:</label>
  147.           <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
  148.         </div>
  149.       </div>
  150.       <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
  151.     </div>
  152.     <!-- 遮盖层 -->
  153.     <div id="bg" class="login-bg"></div>
  155.     <script>
  156.       let login = document.querySelector('.login');
  157.       let mask = document.querySelector('.login-bg');
  158.       let link = document.querySelector('#link');
  159.       let closeBtn = document.querySelector('#closeBtn');
  160.       let title = document.querySelector('#title');
  161.       // 点击link 弹出登录框和灰色的背景
  162.       link.addEventListener('click',function() {
  163.         mask.style.display = 'block';
  164.         login.style.display = 'block';
  165.       })
  166.       // 点击closeBtn 隐藏
  167.       closeBtn.addEventListener('click',function() {
  168.         mask.style.display = 'none';
  169.         login.style.display = 'none';
  170.       })
  171.       // 实现拖拽效果
  172.       // 鼠标坐标-鼠标在盒子内的坐标=模态框真正的位置
  173.       title.addEventListener('mousedown',function(e) {
  174.         let x = e.pageX - login.offsetLeft;
  175.         let y = e.pageY - login.offsetTop;
  176.         // move
  177.         document.addEventListener('mousemove',move);
  178.         function move(e) {
  179.           login.style.left = e.pageX - x + 'px';
  180.           login.style.top = e.pageY - y + 'px';
  181.           console.log(e.pageX - x + 'px');
  182.         }
  183.         // stop
  184.         document.addEventListener('mouseup',function() {
  185.           document.removeEventListener('mousemove',move);
  186.         })
  187.       })
  189.     </script>
  190.   </body>
  191. </html>