JS實現簡單拖動模態框案例
本文實例為大傢分享瞭JS實現簡單拖動模態框的具體代碼，供大傢參考，具體內容如下
需要實現的效果：
①點擊“點擊，彈出登錄框”後模態框和遮擋層就會顯示出來
②點擊關閉按鈕，模態框和遮蓋層就會隱藏起來
③頁面拖拽
功能分析：
首先給上面的"點擊，彈出登錄框"設置點擊事件，點擊之後就顯示遮罩層和模態框，然後給模態框上面的關閉按鈕設置點擊事件，點擊之後就隱藏遮罩層和模態框。然後是拖拽過程，這個過程的實現較為復雜，主要分為下面幾步：
1.明確模態框的真正位置是鼠標的坐標減去鼠標在模態框內的坐標。
2.鼠標的坐標通過鼠標按下事件獲取，通過e.pageY和e.pageX來獲取。
3.按下之後想要獲得鼠標在模態框中的坐標（一直都不會變），需要獲得盒子的坐標，盒子坐標通過element.offsetTop和element.offsetLeft來獲取，通過鼠標的坐標減去模態框的坐標獲得鼠標在模態框中的坐標。
4.按下之後鼠標移動，就讓模態框的坐標設置稱為鼠標的坐標減去鼠標在模態框中的坐標。
5.鼠標松開之後需要停止拖拽，就是移除鼠標移動事件。
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖動模態框</title>
<script>
window.onload = function() {
var loginbox = document.querySelector('.loginbox');
var gray = document.querySelector('.gray');
var loginheader = document.querySelector('.login-header');
var close = document.querySelector('.close');
var move = document.querySelector('.move');
loginheader.addEventListener('click', function() {
loginbox.style.display = 'block';
gray.style.display = 'block';
});
close.addEventListener('click', function() {
loginbox.style.display = 'none';
gray.style.display = 'none';
});
move.addEventListener('mousedown', function(e) {
// 鼠標在盒子內得距離
var x = e.pageX - loginbox.offsetLeft;
var y = e.pageY - loginbox.offsetTop;
// alert('hahah')
document.addEventListener('mousemove', move)
function move(e) {
loginbox.style.left = e.pageX - x + 'px';
loginbox.style.top = e.pageY - y + 'px';
}
// 鼠標談起就移除鼠標移動事件
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move)
})
})
}
</script>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
.move {
cursor: move;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
color: #000000;
}
.loginbox {
display: none;
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 520px;
height: 300px;
background-color: #fff;
}
.loginbox .close {
cursor: pointer;
}
.loginbox p {
float: left;
font-size: 22px;
text-align: center;
margin-top: 30px;
margin-left: 240px;
}
.loginbox .content {
float: right;
margin-top: 30px;
margin-right: 70px;
}
.loginbox .content input {
width: 300px;
height: 25px;
outline: none;
border: 1px solid #ccc;
}
.loginbox .btn {
background-color: #fff;
width: 180px;
height: 30px;
border: 1px solid #ccc;
margin-top: 40px;
margin-left: 170px;
}
.loginbox span {
position: absolute;
font-size: 12px;
text-align: center;
line-height: 50px;
z-index: 9999;
top: -25px;
right: -25px;
width: 50px;
height: 50px;
background-color: #fff;
color: #000000;
border-radius: 50%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
}
.gray {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:;" >點擊，彈出登錄框</a></div>
<div class="loginbox">
<p class="move">登錄會員</p>
<div class="content">
<label for="">用戶名：</label>
<input type="text" placeholder="請輸入用戶名">
</div>
<div class="content">
<label for="">登錄密碼：</label>
<input type="password" placeholder="請輸入用戶名">
</div>
<input type="button" value="登錄會員" class="btn">
<span class="close">關閉</span>
</div>
<div class="gray">
</div>
</body>
</html>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。