JavaScript 拖拽的模态框
【案例分析】
- 點選彈出層，會彈出模态框，并且顯示遮擋層
- 點選關閉按鈕，可以關閉模态框，并且同時關閉遮擋層
- 滑鼠放到模态框在上面一行，可以按住滑鼠拖拽模态框在頁面中移動
- 滑鼠放松，可以停止拖動模态框
頁面拖拽的事件是：滑鼠按下mousedown，滑鼠移動mousemove，滑鼠松開mouseup
拖拽過程：滑鼠移動過程中，滑鼠獲得最新的left、right值并指派給模态框
實作元素居中效果
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
以下為全部代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模态框</title>
<style type="text/css">
.login-header {
width: 200px;
height: 200px;
margin: 0px auto;
}
#link{
text-decoration: none;
color: black;
font-size: 50px;
}
.loging-box {
background-color: #DCD7D7;
width: 500px;
height: 200px;
margin: 10px auto;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 8px;
border-radius: 5%;
display: none;
}
p {
font-size: 20px;
}
#title {
float: left;
}
#close {
float: right;
}
#close a{
text-decoration: none;
color: black;
}
.header {
height: 20px;
cursor: pointer;
}
#input-box {
margin-top: 47px;
margin-left: 107px;
}
.login-input{
margin-bottom: 10px;
font-size: 20px;
}
.login-input input {
width: 180px;
height: 25px;
}
.loging-box button{
width: 150px;
height: 30px;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="login-header"> <a id="link" href="javascript:;">點選登入</a> </div>
<!-- 登入頁面框 -->
<div class="loging-box">
<p id="title">使用者登入界面</p> <p id="close"><a href="javascript:;">關閉</a></p>
<div class="header"></div>
<div id="input-box">
<div class="login-input">
<label>使用者名:</label>
<input type="text" placeholder="請輸入使用者名">
</div>
<div class="login-input">
<label>密    碼: </label>
<input type="password" placeholder="請輸入密碼">
</div>
</div>
<button>登入</button>
</div>
<script type="text/javascript">
var link = document.querySelector('#link');
var logingBox = document.querySelector('.loging-box');
var close = document.querySelector('#close');
// 彈出登入界面
link.addEventListener('click', function(){
logingBox.style.display = 'block';
link.style.display = 'none';
document.body.style.backgroundColor = '#9C9C9C';
})
// 關閉登陸界面的效果
close.addEventListener('click', function(){
logingBox.style.display = 'none';
link.style.display = 'block';
document.body.style.backgroundColor = '#FFFFFF';
})
// 拖拽效果,隻在.header下拖動才有效
// 1.滑鼠按下
var header = document.querySelector('.header');
header.addEventListener('mousedown',function(e){
// 得到滑鼠在登入框中的坐标
var x = e.pageX - logingBox.offsetLeft;
var y = e.pageY - logingBox.offsetTop;
function move (e) {
// 登入框的坐标是按照框的左上角決定的，是以要減去框内坐标
logingBox.style.left = e.pageX - x + 'px';
logingBox.style.top = e.pageY - y + 'px';
}
// 2.實作滑鼠拖動效果
document.addEventListener('mousemove', move);
// 3.當滑鼠放開後，清除事件
document.addEventListener('mouseup', function(){
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
</html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)