模仿百度地图登陆功能的遮罩层的实现

最近在模仿百度地图登陆注册功能,其中最主要的就是遮罩层的实现,下面就来做一个简单的例子来实现一下遮罩层效果。

一、遮罩层的实现的效果

首先,简单了解一下遮罩层的实现效果。

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控制遮罩层的出现以及消失。
阅读更多
个人分类: html
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭