结构代码：
<body>
<divclass="login-header"><aid="link"href="javascript:;">点击，弹出登录框</a></div>
<divid="login"class="login">
<divid="title"class="login-title">登录会员
<span><aid="closeBtn"href="javascript:void(0);"class="close-login">关闭</a></span>
</div>
<divclass="login-input-content">
<divclass="login-input">
<label>用户名：</label>
<inputtype="text"placeholder="请输入用户名"name="info[username]"id="username"class="list-input">
</div>
<divclass="login-input">
<label>登录密码：</label>
<inputtype="password"placeholder="请输入登录密码"name="info[password]"id="password"class="list-input">
</div>
</div>
<divid="loginBtn"class="login-button"><ahref="javascript:void(0);"id="login-button-submit">登录会员</a></div>
</div>
<!--遮盖层-->
<divid="bg"class="login-bg"></div>
<script>
</script>
</body>
样式代码：
<style>
.login-header{
width:100%;
text-align:center;
height:30px;
font-size:24px;
line-height:30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a{
padding:0px;
margin:0px;
}
.login{
display:none;
width:512px;
height:280px;
position:fixed;
border:#ebebebsolid1px;
left:50%;
top:50%;
background:#ffffff;
box-shadow:0px0px20px#ddd;
z-index:9999;
transform:translate(-50%,-50%);
}
.login-title{
width:100%;
margin:10px0px0px0px;
text-align:center;
line-height:40px;
height:40px;
font-size:18px;
position:relative;
cursor:move;
}
.login-input-content{
margin-top:20px;
}
.login-button{
width:50%;
margin:30pxauto0pxauto;
line-height:40px;
font-size:14px;
border:#ebebeb1pxsolid;
text-align:center;
}
.login-bg{
display:none;
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,.3);
}
a{
text-decoration:none;
color:#000000;
}
.login-buttona{
display:block;
}
.login-inputinput.list-input{
float:left;
line-height:35px;
height:35px;
width:350px;
border:#ebebeb1pxsolid;
text-indent:5px;
}
.login-input{
overflow:hidden;
margin:0px0px20px0px;
}
.login-inputlabel{
float:left;
width:90px;
padding-right:10px;
text-align:right;
line-height:35px;
height:35px;
font-size:14px;
}
.login-titlespan{
position:absolute;
font-size:12px;
right:-20px;
top:-30px;
background:#ffffff;
border:#ebebebsolid1px;
width:40px;
height:40px;
border-radius:20px;
}
</style>
js代码：
window.onload=function(){
//1.获取元素
varlogin=document.querySelector('.login');
varmask=document.querySelector('.login-bg');
varlink=document.querySelector('#link');
varcloseBtn=document.querySelector('#closeBtn');
vartitle=document.querySelector('#title');
//2.点击弹出层这个链接link让mask和login显示出来
link.addEventListener('click',function(){
login.style.display='block';
mask.style.display='block';
})
//3.点击closeBtn就隐藏mask和login
closeBtn.addEventListener('click',function(){
login.style.display='none';
mask.style.display='none';
});
//4.给标题添加一个鼠标按下的事件
title.addEventListener('mousedown',function(e){
//获取鼠标在框内的距离
varx=e.pageX-login.offsetLeft;
vary=e.pageY-login.offsetTop;
//5创建移动函数
functionmove(e){
login.style.left=e.pageX-x+'px';
login.style.top=e.pageY-y+'px';
}
//鼠标移动则触发事件
document.addEventListener('mousemove',move);
//鼠标松移除事件
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
});
});
}
|
Copyright©2000-2022