您的位置：首页 > 其它

点击其他地方弹层消失

2017-02-10 17:02 330 查看

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>点击其他地方弹层消失</title>
<style>
body,html{
width:100%;
height:100%;
}
.opciaty{
width:200px;
height:200px;
background:#000;
opacity:0.5;
filter:alpha(opacity=5);
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
display:none;
z-index:100;
}
.login{
width:100%;
height:100%;
background: #000;
opacity:0.5;
filter:alpha(opacity=50);
display:none;
}
#clickBtn{
cursor: pointer;
}
</style>
<script src="jquery-1.11.3.min.js"></script>

</head>

<body>
<div id="clickBtn">点击弹层弹出</div>
<div class="opciaty" id="loginBox">opciaty测试</div>
<div class="login"></div>

<script>
$("#clickBtn").on("click",function(){
$(".opciaty").show();
$(".login").show();
})
$(".login").on("click",function(){
$(".opciaty").hide();
$(".login").hide();
})
</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航