jquery-彈出層
html：
<html>
<head>
<meta charset="utf-8">
<title>jquery彈出層</title>
<script type="text/javascript" src="../js/jquery/jquery-1.12.4.min.js" ></script>
</head>
<body>
<div class="header">
<a id="loginLink" href="#">登錄</a>
<a id="regeLink" href="#">註冊</a>
</div>
<!-- 彈出層遮罩 -->
<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>
</div>
<!-- 登錄窗體 -->
<div id="loginHtml" style="display:none;">
<!-- 登錄窗體 -->
<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> </label>
<input id="loginSubmitBtn" type="submit" class="submit" value="填寫好了"/>
</div>
</div>
</div>
<!-- 註冊窗體 -->
<div id="regeHtml" style="display:none;">
<!-- 註冊窗體 -->
<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>重復密碼</label>
<input id="repassword" class="input" name="repassword" type="password"/>
</div>
<div class="item">
<label> </label>
<input id="regeSubmitBtn" type="submit" class="submit" value="填寫好了"/>
</div>
</div>
</div>
</body>
</html>
CSS：
*{margin:0;padding:0;}
body
{
text-align:center;
line-height:30px;
}
/*彈出層遮罩*/
.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: #fff;
}
/*彈出層關閉按鈕*/
.layer-close
{
float :right;
width: 24px;
height: 24px;
border: 3px solid #fff;
text-align: center;
line-height: 24px;
border-radius: 50%;
background: #eee;
margin-right: -12px;
margin-top:-12px;
}
.layer-close:hover
{
cursor: pointer;
background: #ccc;
color: #fff;
}
/*登錄*/
.login
{
}
.login h4
{
font-size:20px;
line-height:50px;
}
.login label
{
margin-right: 5px;
color: #888;
display: inline-block;
width: 60px;
text-align: right;
}
.login .input
{
border:1px solid #ccc;
border-radius:3px;
padding:10px 5px;
width:250px;
}
.login .item
{
margin:20px auto;
}
.login .submit
{
background: #e40;
border:1px solid #e40;
border-radius:5px;
padding:10px 5px;
width:250px;
color:#fff;
}
.login .error-msg
{
color:#e40;
}
/*頂部*/
.header
{
height:80px;
line-height:80px;
text-align : right;
margin: 0 20px;
overflow:hidden;
}
.header a
{
color:#666;
text-decoration:none;
margin-left:20px;
}
JS：
$(document).ready(function($){
// 登錄鏈接事件
$("#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();
}
});
jquery-彈出層