模仿百度地图登陆功能的遮罩层的实现
最近在模仿百度地图登陆注册功能，其中最主要的就是遮罩层的实现，下面就来做一个简单的例子来实现一下遮罩层效果。
一、遮罩层的实现的效果
首先，简单了解一下遮罩层的实现效果。
1、用户点击登陆按钮
2、遮罩层出现，登陆界面出现
3、点击登陆界面上的关闭图标
4、登陆界面消失，遮罩层消失
二、具体实现代码
<!--登录界面遮罩层的实现-->
<html>
<head></head>
<title></title>
<style>
.mask{
background-color:grey;
width:100%;
height:100%;
display:none;
position:absolute;
top:0;
left:0;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
z-index:1001;
}
.login_div{
width:100%;
height:100%;
z-index:1002;
position:relative;
display:none;
background-color:white;
top:100px;
left:500px;
border:1px solid red;
}
#close_icon{
width:60px;
height:30px;
display:block;
background-color:red;
position:position;
margin-top:10px;
margin-left:420px;
margin-bottom:10px;
text-align:center;
}
.login_head{
border-bottom:1px solid grey;
}
#login_wrapper{
width:500px;
height:300px;
}
}
</style>
<body>
<!--主界面-->
<button id="login_btn" onclick="showMask('login_div','mask')">login_button</button>
<!--遮罩层-->
<div id="mask" class="mask"></div>
<!--登录浮层-->
<div id="login_wrapper">
<div id="login_div" class="login_div">
<div id="login_head" class="login_head">
<span id="close_icon" onclick="hideMask('login_div','mask')">close</span>
</div>
</div>
</div>
</body>
<script>
function showMask(login_div,mask){
document.getElementById(login_div).style.display="block";
document.getElementById(mask).style.display="block";
}
function hideMask(login_div,mask){
document.getElementById(login_div).style.display="none";
document.getElementById(mask).style.display="none";
}
</script>
</html>三、最后说几句<span style="white-space:pre"> </span>这个遮罩层的实现非常简单，最主要是用CSS编写遮罩层的样式以及用JS控制遮罩层的出现以及消失。转载自：https://blog.csdn.net/mayzilee/article/details/51775674
