弹出层

弹出层的介绍：

使用场景：注册、登录（表单基本校验）。统一的消息提示框（代替alert）。减少页面跳转、刷新的一些操作。

使用思路：1.遮罩层。2.弹出层窗口。都是通过div实现的。使用jQuery动态控制隐藏显示。

                  我们还会对弹出层做简单的封装。让弹出层结构得到重复利用。

html:
 

<!--弹出层遮罩、弹出层窗体是并列关系-->
	<!--弹出层遮罩-->
	<div id="layer-mask" class="layer-mask"></div>
	<!--弹出层窗体-->
	<div id="layer-pop" class="layer-pop">
		<!--弹出层关闭按钮-->
		<div id="layer-close" class="layer-close">×</div>
		<!--弹出层内容区域-->
		<div id="layer-content" class="layer-content">
			<!--登录窗体-->
			<div class="login">
				<h4 class="title">登 录</h4>
				<div class="item">
					<label>账号</label>
					<input id="username" class="input" name="username" type="text"/>
					<p class="error-msg"></p>
				</div>
				<div class="item">
					<label>密码</label>
					<input id="password" class="input" name="password" type="password"/>
				</div>
				<div class="item">
					<label>&nbsp;</label>
					<input id="loginSubmitBtn" type="submit" class="submit" value="填写好了"/>
				</div>
			</div>
		</div>
	</div>

css:

/*弹出层遮罩*/
.layer-mask{
	display: none;
	z-index: 99999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;

}

/*弹出层窗体*/
.layer-pop{
	display: none;
z-index: 100000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;

	width: 400px;
	height: 300px;
	background: #ffffff;

}
/*弹出层关闭按钮*/
.layer-close{
	float: right;
	width: 24px;
	height: 24px;
	border: 3px solid #fff;
	text-align: center;
	line-height: 24px;
	border-radius: 50%;
	background: #eeeeee;
	margin-right: -12px;
	margin-top: -12px;
}
.layer-close:hover{
	cursor: pointer;
	background: #ccc;
	color: #eeeeee;
}

js:

$(document).ready(function($){
	//登录链接事件
	$("#loginLink").click(function(){
		//显示弹出层遮罩
		$("#layer-mask").show();
		//显示弹出层窗体
		$("#layer-pop").show();
		//弹出层关闭按钮绑定事件
		$("#layer-close").click(function(){
			$("#layer-mask").hide();
			$("#layer-pop").hide();
		});

	})

	/*// 登录链接事件
	// $("#loginLink").click(function(){
	// 	// 显示弹出层遮罩
	// 	$("#layer-mask").show();
	// 	// 显示弹出层窗体
	// 	$("#layer-pop").show();
	// 	// 弹出层关闭按钮绑定事件
	// 	$("#layer-close").click(function(){
	// 		// 弹出层关闭
	// 		$("#layer-mask").hide();
	// 		$("#layer-pop").hide();
	// 	});
	// });

	
	// 登录链接事件
	$("#loginLink").click(function(){
		// 获取登录窗体代码
		var loginHtml = $("#loginHtml").html();
		showLayer(loginHtml,500,300,closeCallback);

		// 登录表单校验
		$("#loginSubmitBtn").click(function(){
			var username = $("input[name='username']").val();
			var password = $("input[name='password']").val();
			if(username === 'imooc' && password === 'imooc'){
				alert("登录成功");
			}else{
				$(".error-msg").html("账号或密码输入错误");
			}
		});
	});

	// 注册链接事件
	$("#regeLink").click(function(){
		// 获取注册窗体代码
		var regeHtml = $("#regeHtml").html();
		showLayer(regeHtml,500,350,closeCallback);

		// 注册表单校验
		$("#regeSubmitBtn").click(function(){
			var username = $("input[name='username']").val();
			var password = $("input[name='password']").val();
			var repassword = $("input[name='repassword']").val();
			if(username === 'imooc' && password === 'imooc' && repassword === password){
				alert("注册成功");
			}else{
				$(".error-msg").html("账号或密码输入错误");
			}
		});
	});


	// 弹出层关闭回调函数
	function closeCallback(){
		$(".error-msg").html("");
	}	

	// 显示弹出层
	function showLayer(html,width,height,closeCallback){
		// 显示弹出层遮罩
		$("#layer-mask").show();
		// 显示弹出层窗体
		$("#layer-pop").show();
		// 设置弹出层窗体样式
		$("#layer-pop").css({
			width : width,
			height : height
		});
		// 填充弹出层窗体内容
		$("#layer-content").html(html);
		// 弹出层关闭按钮绑定事件
		$("#layer-close").click(function(){
			// 弹出层关闭
			hideLayer();
			// 关闭的回调函数
			closeCallback();
		});
	}

	// 隐藏弹出层
	function hideLayer(){
		// 弹出层关闭
		$("#layer-mask").hide();
		$("#layer-pop").hide();
	}
*/
});