練習(xí)制作的一個(gè)可拖拽的登陸彈窗

• 點(diǎn)擊頁面頭部登陸按鈕，彈出登陸彈窗和遮罩，并禁用滾動(dòng)條；
• 點(diǎn)擊彈窗里的關(guān)閉按鈕，關(guān)閉登陸彈窗和遮罩，并還原滾動(dòng)條；
• 彈窗可以在視口區(qū)域任意位置拖動(dòng)，但是不可移出瀏覽器邊緣；
• 不管關(guān)閉前彈窗移動(dòng)到任何位置，每次點(diǎn)擊登錄打開彈窗都在視口上下左右居中顯示；
• 當(dāng)彈窗居于瀏覽器視口右邊緣或者下邊緣時(shí)，調(diào)整瀏覽器大小時(shí)彈窗也不會(huì)超出瀏覽器邊緣，會(huì)始終貼著右邊緣或者下邊緣；
  <i> 效果圖如下:</i>

初始效果-帶滾動(dòng)條

點(diǎn)擊登錄-彈窗&遮罩

可拖動(dòng)-不會(huì)拖到瀏覽器視口外

html部分

<header class="header">
<div class="logo"><img src="imgs/logo.png" alt="logo.png"></div>
<button class="login">登陸</button>
</header>

<div id="mask"></div>

<div id="login-pop">
<form class="form">
<h2>登陸彈窗<span class="close">X</span></h2>
<div class="field">
<label for="userName">用戶名：</label>
<input type="text" name="userName" id="userName" placeholder="請(qǐng)輸入用戶名">
</div>
<div class="field">
<label for="password">密碼：</label>
<input type="password" name="password" id="password" placeholder="請(qǐng)輸入密碼">
</div>
<button id="loginbtn">登錄</button>
</form>
</div>

<p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p> <p>1</p> <p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>
<p>1</p> <p>1</p> <p>1</p> <p>1</p>

css部分

/*頭部*/
* {margin:0; padding:0; }
body {font-size:14px; color:#333; position: relative; }
.header {width: 980px; height:50px; margin: 0 auto; background-color: #efefef; border-radius: 0 0 5px 5px; }
.header .logo {float:left; }
.header .logo img {height: 50px; }
.login{float: right; margin: 15px; cursor: pointer; }
/*遮罩*/
#mask{z-index: 9; background-color: #000; opacity:0.3; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; }
/*登陸彈窗*/
#login-pop{z-index: 10; width: 300px; height: 230px; background-color: #fff; position: absolute; text-align: center; display: none; }
#login-pop h2 {height:50px; line-height:50px; text-align:center; font-size:16px; letter-spacing:5px; color:#666; border-bottom:1px solid #ccc; margin:0 0 30px 0; position: relative; cursor: move; }
#login-pop .close{position: absolute; right: 10px; cursor: pointer; }
#login-pop .field{margin-bottom: 20px; }
#login-pop .field label{width: 60px; text-align: right; display: inline-block; }
#login-pop #loginbtn{width: 100px; height: 40px; line-height: 40px; background-color: green; border: none; color: #fff; font-size: 16px; border-radius: 5px; cursor: pointer; }
</code>

• 彈窗的絕對(duì)定位的位置坐標(biāo)是通過js實(shí)現(xiàn)的；

js部分

var 
//獲取登陸彈窗div——loginPop
//獲取彈窗的頭部h2——move
loginPop = document.getElementById("login-pop"),
move = document.getElementsByTagName("h2")[0];
//給move添加鼠標(biāo)按下事件
move.addEventListener("mousedown",function (e) {
    //獲取事件觸發(fā)時(shí)按下點(diǎn)距瀏覽器當(dāng)前窗口的水平坐標(biāo)(e.clientX)和垂直坐標(biāo)(e.clientX)
    //以及此時(shí)登陸彈窗左邊緣和上邊緣距瀏覽器左邊緣和上邊緣的距離offsetLeft和offsetTop
    //計(jì)算得到鼠標(biāo)按下點(diǎn)距登陸彈窗左邊緣和上邊緣的距離diffX、diffY
    var diffX = e.clientX - loginPop.offsetLeft,
        diffY = e.clientY - loginPop.offsetTop;
    //利用IE獨(dú)有的方法setCapture，鼠標(biāo)按下時(shí)捕獲鼠標(biāo)移出瀏覽器的事件
    //配合下面releaseCapture，鼠標(biāo)彈起時(shí)釋放
    //解決IE在限制彈窗移出瀏覽器失效的bug
    if (typeof loginPop.setCapture != 'undefined') {
        loginPop.setCapture();
    }
    //鼠標(biāo)在彈窗頭部按下時(shí)，給document添加鼠標(biāo)移動(dòng)事件
    //從而讓彈窗可以在document范圍內(nèi)移動(dòng)
    document.addEventListener("mousemove",mousemove); 
    function mousemove(e) {
        //實(shí)時(shí)獲取鼠標(biāo)移動(dòng)事件觸發(fā)時(shí)按住點(diǎn)距瀏覽器當(dāng)前窗口的水平坐標(biāo)(e.clientX)和垂直坐標(biāo)(e.clientX)
        //根據(jù)上面計(jì)算得到的diffX、diffY
        //計(jì)算移動(dòng)后登陸彈窗位置參數(shù)left、top
        var left = e.clientX - diffX;
        var top = e.clientY - diffY;
        //當(dāng)?shù)顷憦棿耙瞥鰹g覽器左邊緣時(shí)left<0，
        //當(dāng)彈窗移出瀏覽器右邊緣時(shí)left > getInner().width - loginPop.offsetWidth
        //限制彈窗移出瀏覽器左右邊緣
        // 上下邊緣同理
        if (left < 0) {
            left = 0;
        } else if (left > getInner().width - loginPop.offsetWidth) {
            left = getInner().width - loginPop.offsetWidth;
        }               
        if (top < 0) {
            top = 0;
        } else if (top > getInner().height - loginPop.offsetHeight) {
            top = getInner().height - loginPop.offsetHeight;
        }
        loginPop.style.left = left + 'px';
        loginPop.style.top = top + 'px';
    }
    // 給document添加鼠標(biāo)彈起事件
    // 鼠標(biāo)彈起時(shí)移出鼠標(biāo)的移動(dòng)事件和彈起事件自身
    // 鼠標(biāo)彈起時(shí)彈窗停止在當(dāng)前位置
    document.addEventListener("mouseup",mouseup);
    function mouseup() {
        document.removeEventListener("mousemove",mousemove);
        document.removeEventListener("mouseup",mouseup);
        //配合上面的setCapture
        if (typeof loginPop.releaseCapture != 'undefined') {
            loginPop.releaseCapture();
        }
    }
});
// 瀏覽器的window添加窗口大小的監(jiān)聽事件
// 當(dāng)瀏覽器大小變化時(shí)，判斷彈窗當(dāng)前位置是否超出瀏覽器的右邊緣或者下邊緣
// 當(dāng)超出時(shí)強(qiáng)制賦值使其定位在瀏覽器邊緣
window.addEventListener("resize",fn);
function fn() {
    if (loginPop.offsetLeft > getInner().width - loginPop.offsetWidth) {
        loginPop.style.left = getInner().width - loginPop.offsetWidth + 'px';
    }
    if (loginPop.offsetTop > getInner().height - loginPop.offsetHeight) {
        loginPop.style.top = getInner().height - loginPop.offsetHeight + 'px';
    }
};  
// 遮罩
// 獲取頭部的登陸按鈕login，彈窗的關(guān)閉按鈕close、遮罩div mask
var login = document.getElementsByClassName("login")[0],
    close = document.getElementsByClassName("close")[0],
    mask = document.getElementById("mask");
// 頭部的登陸按鈕添加點(diǎn)擊事件
login.addEventListener("click",function(){ 
    // 設(shè)置彈窗居中
    center(300,230);
    // 顯示遮罩
    mask.style.display = "block";
    // 顯示彈窗 
    loginPop.style.display = "block";
    // 禁用滾動(dòng)條
    document.documentElement.style.overflow = 'hidden';
});
// 彈窗的關(guān)閉按鈕點(diǎn)擊事件
close.addEventListener("click",function(){ 
    // 隱藏遮罩和登陸彈窗
    mask.style.display = "none"; 
    loginPop.style.display = "none"; 
    // 還原滾動(dòng)條默認(rèn)狀態(tài)
    document.documentElement.style.overflow = 'auto';
}); 
// 登陸彈窗居中，兩個(gè)參數(shù)分別是彈窗的寬高
function center(width, height) {
    //通過瀏覽器的視口大小減去彈窗大小后除以2確定彈窗的絕對(duì)定位位置參數(shù)top、left
    var top = (getInner().height - height) / 2,
        left = (getInner().width - width) / 2;
    loginPop.style.top = top + 'px';
    loginPop.style.left = left + 'px';
}
//跨瀏覽器獲取視口大小
function getInner() {
    //非IE瀏覽器，支持innerWidth、innerHeight
    if (typeof window.innerWidth != 'undefined') { 
        return {
            width : window.innerWidth,
            height : window.innerHeight
        }
    } else {
        //IE瀏覽器，不支持innerWidth、innerHeight
        //支持documentElement.clientWidth、documentElement.clientHeight
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}
};