js點擊登錄按鈕的時候,彈出登錄頁面,點擊登錄框以外區(qū)域隱藏登錄頁面,點擊登錄框不隱藏登錄頁面
css代碼:
.box2{
position: fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.6);
display: none;
}
.form{
width: 300px;
height: 300px;
position: relative;
top:50%;
left: 50%;
margin-left:-150px;
margin-top:-150px;
background: #1E9FFF;
}
.login {
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
html代碼:
<div class="box">
<button type="button" class="btn">登錄</button>
<div class="box2">
<form action="" method="post" class="form">
<label>用戶名:</label><br />
<input type="text" name="" id="" value="" />
<label>密碼:</label><br />
<input type="password" name="" id="" value="" />
<input type="submit" value="登錄" />
</form>
</div>
</div>
js代碼:
<script>
$('.btn').click(function(){
$('.box2').toggle();
})
$('.box2').click(function(){
$(this).toggle();
})
$('.form').click(function(event){
$('.box2').css('display','block');
event.stopPropagation();//阻止事件冒泡
})
</script>
簡單的寫了一個,有需要的話可自行優(yōu)化
