jQuery 弹出层案例

弹出层，例如登录界面。
有一个半透明的div，与另一个带有主题的div组成。
<!DOCTYPE html>
<html>
<head>
	<title>弹出层</title>
	<meta charset="utf-8">
	<style type="text/css">
		.layerMask{
			display: none;
			z-index: 99999;
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background:#000;
			opacity: 0.5;
		}

		.layerPop{
			display: none;
			z-index: 100000;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin:auto;

			width: 400px;
			height: 300px;
			background-color: #fff;
		}

		/*弹出层关闭按钮*/
		.layerClose{
			float: right;
			height: 20px;
			width: 20px;
			border:3px solid #fff;
			text-align: center;
			line-height: 20px;
			border-radius: 50%;
			background-color: #eee;

			margin-top: -12px;
			margin-right: -12px;
		}
		.layerClose:hover{
			/*鼠标移动上去*/
			cursor: pointer;
			background: #ccc;
			color: #fff;
		}

		.title{
			text-align: center;
		}
		.item label{
			margin-left: 10px;
			margin-left: 20px;
			color: #888;
		}
		.login .item{
			margin: 20px auto;
		}
		.login .submit{
			background: #e40;
			border:1px solid #e40;
			border-radius: 5px;
			padding:10px 5px;
			width: 250px;
			color: #fff;
			float: right;
			margin-right: 90px;
		}
		.login .errorMsg{
			color: #e40;
		}
		.login .input{
			border:1px solid #ccc;
			border-radius: 3px;
			padding:10px 5px;
			width: 250px;
		}
	</style>
</head>
<body>
	<div>
		<a id="loginLink" href="#">登录</a>
		<a href="#">注册</a>
	</div>
	<!-- 弹出层遮罩 -->
	<div id="layerMask" class="layerMask">
		
	</div>

	<!-- 弹出层窗体 -->
	<div id="layerPop" class="layerPop">
		<!-- 弹出层关闭按钮 -->
		<div id="layerClose" class="layerClose">x</div>
		<!-- 弹出层内容区域 -->
		<div id="layerContent" class="layerContent">
			<div class="login">
				<h4 class="title">登录</h4>
				<div class="item">
					<label>账号</label>
					<input type="text" name="username" id="username" class="input">
					<p class="errorMsg"></p>
				</div>
				<div class="item">
					<label>密码</label>
					<input type="password" name="password" id="password" class="input">
				</div>
				<div class="item">
					<input type="submit" value="填写好了" id="loginSubmitBtn" class="submit">
				</div>
			</div>

		</div>
	</div>


	

	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			// 登录链接事件
			$('#loginLink').click(function(){
				// 显示弹出层遮罩
				$('#layerMask').show();
				// 显示弹出层窗体
				$('#layerPop').show();
				// 弹出层关闭按钮绑定事件
				$('#layerClose').click(function(){
					// 弹出层关闭
					$('#layerMask').hide();
					$('#layerPop').hide();
				})
			})
		})
	</script>
</body>
</html>
猜你喜欢
