練習(xí)制作的一個可拖拽的登陸彈窗
- 點擊頁面頭部登陸按鈕，彈出登陸彈窗和遮罩，并禁用滾動條镰烧；
- 點擊彈窗里的關(guān)閉按鈕狂魔，關(guān)閉登陸彈窗和遮罩，并還原滾動條课舍；
- 彈窗可以在視口區(qū)域任意位置拖動，但是不可移出瀏覽器邊緣；
- 不管關(guān)閉前彈窗移動到任何位置污秆，每次點擊登錄打開彈窗都在視口上下左右居中顯示；
- 當(dāng)彈窗居于瀏覽器視口右邊緣或者下邊緣時昧甘，調(diào)整瀏覽器大小時彈窗也不會超出瀏覽器邊緣良拼，會始終貼著右邊緣或者下邊緣；
<i> 效果圖如下:</i>
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="請輸入用戶名">
</div>
<div class="field">
<label for="password">密碼：</label>
<input type="password" name="password" id="password" placeholder="請輸入密碼">
</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>
- 彈窗的絕對定位的位置坐標是通過js實現(xiàn)的疾层；
js部分
var
//獲取登陸彈窗div——loginPop
//獲取彈窗的頭部h2——move
loginPop = document.getElementById("login-pop"),
move = document.getElementsByTagName("h2")[0];
//給move添加鼠標按下事件
move.addEventListener("mousedown",function (e) {
//獲取事件觸發(fā)時按下點距瀏覽器當(dāng)前窗口的水平坐標(e.clientX)和垂直坐標(e.clientX)
//以及此時登陸彈窗左邊緣和上邊緣距瀏覽器左邊緣和上邊緣的距離offsetLeft和offsetTop
//計算得到鼠標按下點距登陸彈窗左邊緣和上邊緣的距離diffX将饺、diffY
var diffX = e.clientX - loginPop.offsetLeft,
diffY = e.clientY - loginPop.offsetTop;
//利用IE獨有的方法setCapture，鼠標按下時捕獲鼠標移出瀏覽器的事件
//配合下面releaseCapture，鼠標彈起時釋放
//解決IE在限制彈窗移出瀏覽器失效的bug
if (typeof loginPop.setCapture != 'undefined') {
loginPop.setCapture();
}
//鼠標在彈窗頭部按下時予弧，給document添加鼠標移動事件
//從而讓彈窗可以在document范圍內(nèi)移動
document.addEventListener("mousemove",mousemove);
function mousemove(e) {
//實時獲取鼠標移動事件觸發(fā)時按住點距瀏覽器當(dāng)前窗口的水平坐標(e.clientX)和垂直坐標(e.clientX)
//根據(jù)上面計算得到的diffX刮吧、diffY
//計算移動后登陸彈窗位置參數(shù)left、top
var left = e.clientX - diffX;
var top = e.clientY - diffY;
//當(dāng)?shù)顷憦棿耙瞥鰹g覽器左邊緣時left<0掖蛤，
//當(dāng)彈窗移出瀏覽器右邊緣時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添加鼠標彈起事件
// 鼠標彈起時移出鼠標的移動事件和彈起事件自身
// 鼠標彈起時彈窗停止在當(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)瀏覽器大小變化時杀捻，判斷彈窗當(dāng)前位置是否超出瀏覽器的右邊緣或者下邊緣
// 當(dā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");
// 頭部的登陸按鈕添加點擊事件
login.addEventListener("click",function(){
// 設(shè)置彈窗居中
center(300,230);
// 顯示遮罩
mask.style.display = "block";
// 顯示彈窗
loginPop.style.display = "block";
// 禁用滾動條
document.documentElement.style.overflow = 'hidden';
});
// 彈窗的關(guān)閉按鈕點擊事件
close.addEventListener("click",function(){
// 隱藏遮罩和登陸彈窗
mask.style.display = "none";
loginPop.style.display = "none";
// 還原滾動條默認狀態(tài)
document.documentElement.style.overflow = 'auto';
});
// 登陸彈窗居中致讥，兩個參數(shù)分別是彈窗的寬高
function center(width, height) {
//通過瀏覽器的視口大小減去彈窗大小后除以2確定彈窗的絕對定位位置參數(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
}
}
}
};
