本文例項為大家分享了實現彈出式可拖動登入框的具體程式碼，供大家參考，具體內容如下

效果圖展示：

總體來說實現起來比較簡單，老規矩，先搭建html框架，程式碼如下：

<div class="login-header"><a id="link" href="script:;" rel="external nofollow" >點選，彈出登入框</a></div>
  <div id="login" class="login">
    <div id="title" class="login-title">登入會員
      <span><a id="closeBtn" href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  class="close-login">關閉</a></span>
    </div>
    <div class="login-input-content">
      <div class="login-input">
        <label>使用者名稱：</label>
        <input type="text" placeholder="請輸入使用者名稱" name="info[username]" id="username" class="list-input">
      </div>
      <div class="login-input">
        <label>登入密碼：</label>www.cppcns.com
 
;
        <input type="password" placeholder="請輸入登入密碼" name="info[password]" id="password" class="list-input">
      </div>
    </div>
    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  id="login-button-submit">登入會員</a></div>
  </div>
  <!-- 遮蓋層 -->
<div id="bg" class="login-bg"></div>

程式碼：

<style>
    .login-header {
      width: 100%;
      text-align: center;
      height: 30px;
      font-size: 24px;
      line-height: 30px;
    }
   
    *{
      padding: 0px;
      margin: 0px;
    }
   
    .login {
      display: none;
      width: 512px;
      height: 280px;
      position: fixed;
    http://www.cppcns.com
 
  border: #ebebeb solid 1px;
      left: 50%;
      top: 50%;
      background: #ffffff;
      box-shadow: 0px 0px 20px #ddd;
      z-index: 9999;
      transform: translate(-50%,-50%);
    }
   
    .login-title {
      width: 100%;
      margin: 10px 0px 0px 0px;
      text-align: center;
      line-height: 40px;
      height: 40px;
      font-size: 18px;
      position: relative;
      cursor: move;
    }
   
    .login-input-content {
      margin-top: 20px;
    }
   
    .login-button {
      width: 50%;
      margin: 30px auto 0px auto;
      line-height: 40px;
      font-size: 14px;
      border: #ebebeb 1px solid;
      text-align: center;
    }
   
    .login-bg {
      display: none;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0px;
      left: 0px;
      background: rgba(0,.3);
    }
   
    a {
      text-decoration: none;
      color: #000000;
    }
   
    .login-button a {
      display: block;
xlGpkMYksW    }
   
    .login-input input.list-input {
      float: left;
      line-height: 35px;
      height: 35px;
      width: 350px;
      border: #ebebeb 1px solid;
      text-indent: 5px;
    }
   
    .login-input {
      overflow: hidden;
      margin: 0px 0px 20px 0px;
    }
   
    .login-input label {
      float: left;
      width: 90px;
      padding-right: 10px;
      text-align: right;
      line-height: 35px;
      height: xlGpkMYksW35px;
      font-size: 14px;
    }
   
    .login-title span {
      position: absolute;
      font-size: 12px;
      right: -20px;
      top: -30px;
      background: #ffffff;
      border: #ebebeb solid 1px;
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }
</style>

有沒有覺得CSS才是最複雜難搞的

最後是程式碼：這裡我們只讓盒子的title部分能拖動，也就是登入框頭部部分

<script>
    //獲取元素
    var login = document.querySelector('.login');
    var mask = document.querySelector('.login-bg');
    var link = document.querySelector('#link');
    var closeBtn = document.querySelector('#closeBtn');
    var title = document.querySelector('#title');
    //建立點選事件，點選link後，登入框顯示
    link.addEventListener('click',function() {
      mask.style.display = 'block';
      login.style.display = 'block';
    })
    //關閉後，登入框隱藏
    closeBtn.addEventListener('click',function() {
      mask.style.display = 'none';
      login.style.display = 'none';
    })
    //滑鼠按下，獲取登入框位置
    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);
      })
    })
</scrip>

這樣就實現了簡單的彈出式可移動登入框。快上手練練吧

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。