<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>模态框拖拽</title>
<style>
*{
margin:0;
padding:0;
}
#link{
color:#000;
text-decoration:none;
border:1pxsolid#000;
}
.login{
width:300px;
height:200px;
background-color:antiquewhite;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:2;
display:none;
}
.login-title{
text-align:center;
width:100%;
height:40px;
line-height:40px;
background-color:aqua;
cursor:move;
}
.login-titlespan{
display:block;
height:30px;
width:30px;
background-color:antiquewhite;
line-height:30px;
border-radius:50%;
position:absolute;
top:-10px;
right:-10px;
font-size:12px;
}
.login-titlespana{
text-decoration:none;
color:#000;
}
.login-input-content{
margin:15px20px0;
line-height:30px;
}
.login-button{
width:200px;
height:20px;
margin:10pxauto;
border:1pxsolidrgb(77,73,73);
text-align:center;
}
.login-buttona{
text-decoration:none;
color:#000;
font-size:14px;
}
#bg{
display:none;
background-color:#000;
width:100%;
height:100%;
opacity:0.3;
z-index:-1;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<divclass="login-header"><ahref="javascript:;"rel="externalnofollow"id="link">点击,弹出登录框</a></div>
<divclass="login"id="login">
<divclass="login-title">登录会员
<span><aid="colseBth"href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"class="close-login">关闭</a></span>
</div>
<divclass="login-input-content">
<divclass="login-input">
<labelfor="">用 户 名:</label>
<inputtype="text"placeholder="请输入用户名"name="info[sername]"id="username"class="username">
</div>
<divclass="login-inpit">
<labelfor="">登录密码:</label>
<inputtype="password"placeholder="请输入登录密码"name="info[password]"id="password">
</div>
</div>
<divclass="login-button"id="loginBtn"><ahref="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"id="login-button-submit">会员登录</a></div>
</div>
<!--遮罩层-->
<divclass="login-bg"id="bg"></div>
</body>
<script>
//1.点击,弹出模态框和遮罩层
//3.点击关闭模态框和遮罩层自动隐藏
//4.页面拖拽原理:鼠标按下且移动,之后松开鼠标
//5.拖拽过程:鼠标移动的时候获得新的值赋值给模态框的left和top值。
//1.获取DOM元素
varoLink=document.querySelector('#link');
varoLogin=document.querySelector('.login');
varoBg=document.querySelector('#bg');
varoClose=oLogin.querySelector('#colseBth');
vartitle=oLogin.querySelector('.login-title');
//2.点击弹出层这个链接link,让mask和login显示出来
oLink.addEventListener('click',function(){
oLogin.style.display='block';
oBg.style.display='block';
})
//3.点击closeBtn就隐藏mask和login
oClose.addEventListener('click',function(){
oLogin.style.display='none';
oBg.style.display='none';
})
//4.开始拖拽
//(1)当我们鼠标按下,就获得鼠标在盒子内的坐标
title.addEventListener('mousedown',function(e){
varx=e.pageX-oLogin.offsetLeft;
vary=e.pageY-oLogin.offsetTop;
console.log(x,y)
//(2)鼠标移动的时候,把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove',move)
functionmove(e){
oLogin.style.left=e.pageX-x+'px';
oLogin.style.top=e.pageY-y+'px';
}
//(3)鼠标弹起,就让鼠标移动事件移除
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
})
})
</script>
</html>
|