您的位置：首页 > Web前端 > JavaScript

js制作带有遮罩弹出层实现登录小窗口

2015-09-12 20:41 711 查看

要实现的效果如下

点击“登录”按钮后，弹出登录小窗口，并且有遮罩层（这个名词还是百度知道的，以前只知道效果，却不知道名字）

在没有点击“登录”按钮之前登录小窗口不显示，点击“登录”按钮后小窗口显示，并且遮罩层笼罩整个页面，使整个页面的其他元素暂时失去行为。

遮罩层的实现：相对于body绝对定位，宽度和高度都和body相同，并且有一定的透明度，使得下面的元素能够被看到。原先的元素的z-index为0，遮罩层的z-index在弹出登录小窗口和原先元素的之间。

说的不是很清楚，还是看代码吧！

<!DOCTYPE html>
<html>
<head>
<title>js制作带有遮罩弹出层实现登录小窗口</title>
<link type="text/css" rel="stylesheet" href="./css/reset.css" />
<script>
window.onload = function(){
document.getElementById("btn_showlogin").onclick = shogMinLogin;
document.getElementById("close_minilogin").onclick = closeLogin;
document.getElementById("firstLine").onmousedown = moveLogin;
/* 显示登录窗口 */
function shogMinLogin(){
var mini_login = document.getElementsByClassName("mini_login")[0];
var cover = document.getElementsByClassName("cover")[0];
mini_login.style.display = "block";
cover.style.display = "block";

mini_login.style.left = (document.body.scrollWidth - mini_login.scrollWidth) / 2 + "px";
mini_login.style.top = (document.body.scrollHeight - mini_login.scrollHeight) / 2 + "px";
}

/* 关闭登录窗口 */
function closeLogin(){
var mini_login = document.getElementsByClassName("mini_login")[0];
var cover = document.getElementsByClassName("cover")[0];
mini_login.style.display = "none";
cover.style.display = "none";
}

/* 移动登录窗口 */
function moveLogin(event){
var moveable = true;

//获取事件源
event = event ? event : window.event;
var clientX = event.clientX;
var clientY = event.clientY;

var mini_login = document.getElementById("mini_login");
console.log(mini_login);
var top = parseInt(mini_login.style.top);
var left = parseInt(mini_login.style.left);//鼠标拖动
document.onmousemove = function(event){
if(moveable){
event = event ? event : window.event;
var y = top + event.clientY - clientY;
var x = left + event.clientX - clientX;
if(x>0 && y>0){
mini_login.style.top = y + "px";
mini_login.style.left = x + "px";
}
}
}
//鼠标弹起
document.onmouseup = function(){
moveable = false;
}
}
};
</script>

<style>
/* 弹出 样式 */
.mini_login{
display:none;
position:absolute;
z-index:2;
background:white;
}
.mini_login .item{
width:320px;
margin:0 auto;
height:48px;
line-height:48px;
padding:0 20px;
}
/* 登录窗第一行*/
.mini_login .firstLine{
color:#666;
background:#f7f7f7;
font-size:18px;
font-weight:bold;
cursor:move;
}
.mini_login .item .login_close{
display:inline-block;
float:right;
cursor:pointer;
}

.mini_login .item label{
font-size:14px;
margin-right:15px;
}
.mini_login .item input{
display:inline-block;
height:60%;
width:70%;
}
/* 登录按钮 */
.mini_login .item a.btn_login{
display:block;
margin:10px 10% 0;
height:30px;
line-height:30px;
width:80%;
background:#4490F7;
color:white;
font-size:16px;
font-weight:bold;
text-align:center;
}
/* 遮罩层样式 */
.cover{
display:none;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
background-color:#000;
opacity:0.3;
}
</style>
</head>
<body>

<!-- 主体 -->
<div class="main">
<a href="javascript:void(0)" class="btn_login" id="btn_showlogin">登录框</a>
</div>

<!-- 弹出登录小窗口 -->
<div class="mini_login" id="mini_login">
<!-- 表单 -->
<form action="" method="post">
<div class="item firstLine" id="firstLine">
<span class="login_title">我要登录</span>
<span class="login_close" id="close_minilogin">X</span>
</div>
<div class="item">
<label>用户</label>
<input type="text" name="uname" />
</div>
<div class="item">
<label>密码</label>
<input type="password" name="upwd" />
</div>
<div class="item">
<a href="javascript:void(0)" class="btn_login" onclick="">登录</a>
</div>
</form>
</div>
<!-- 遮罩层 -->
<div class="cover"></div>

</body>
</html>

显示如下：

关于拖动小窗口的步骤：

鼠标在小窗口上按下 --> 拖动 --> 小窗口移动 --> 鼠标弹起 --> 小窗口停止移动

这分别代表几个事件！

鼠标按下事件 onmouserdown

鼠标移动事件 onmousemove

鼠标弹起事件 onmouseup

document.onmousemove 事件表示在文档中鼠标移动就会触发此事件。

看moveLogin函数的逻辑：

首先moveLogin函数被绑定在 id为firstLine元素的onmousedown 事件上，就是当鼠标在firstLine元素上按下的时候，执行moveLogin函数；

然后moveLogin函数先声明了moveable=true，表示可以拖动元素了，接着把document.onmousemove事件绑定函数了，即从此之后只要移动鼠标就是触发此事件，执行函数内容，该函数先判断moveable是否为true即是否可以拖动，是则拖动，否则什么也不做；

最后moveLogin函数在document.onmouserup 事件函数中将moveable改为false，表示拖动结束。要想再次拖动必须先触发firstLine元素的onmousedow 事件定义moveable=true

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航