HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彈窗</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: gray;
}
.two{
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255,255,255,.5);
text-align: center;
font-size: 30px;
line-height: 45px;
position: absolute;
margin-left: 370px;
margin-top: -20px;
z-index: 1;
}
.two:hover{
color: green;
}
.one{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
height: 300px;
background: white;
border-radius: 5px;
user-select: none;
}
.main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
zoom:1.5;
width: 90%;
height: 90%;
cursor: move;
box-shadow: 0 0 2px #ddd;
}
h1{
text-align: center;
margin: 20px auto;
background: pink;
}
.main p{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.main p:nth-child(3){
position: relative;
margin-left: 12px;
}
.three{
left: 50%;
transform: translateX(-50%);
position: absolute;
margin-left: 20px;
width: 70px;
text-align: center;
}
</style>
</head>
<body>
<div class="one">
<div class="two">X</div>
<div class="main">
<h1>登錄會員</h1>
<p>用戶名：<input type="text"></p>
<p>密碼：<input type="password"></p>
<input type="button" value="開始登錄" class="three">
</div>
</div>
<script>
var hide=document.getElementsByClassName('two')[0]; //右上角關(guān)閉按鈕
var div=document.getElementsByClassName('one')[0];
hide.addEventListener('click',function(){
div.style.display='none';
setTimeout(function(){
div.style.display='block'
},3000);
});
var star=document.getElementsByTagName('h1')[0]; //下面是鼠標(biāo)拖拽(拖動h1)
star.addEventListener('mousedown',function(e){
var x=e.pageX - div.offsetLeft;
var y=e.pageY - div.offsetTop;
// console.log(x,y);
document.addEventListener('mousemove',exit)
function exit(e){
div.style.left = e.pageX - x +"px";
div.style.top = e.pageY - y +"px";
}
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',exit);
});
});
</script>
</body>
</html>
拖動彈窗
----21/5/14
