点击其他地方弹层消失

最新推荐文章于 2022-07-06 14:29:18 发布

sinat_24496253

最新推荐文章于 2022-07-06 14:29:18 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/sinat_24496253/article/details/54972258

版权

<!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>