漠漠睡一个项目，需要用到一个弹窗系统，该系统在使用时，点击某按钮后，指定元素显示并在最高浮层，点击除当前元...
一个项目，需要用到一个弹窗系统，该系统在使用时，点击某按钮后，指定元素显示并在最高浮层，点击除当前元素外的区域时，当前指定元素隐藏。
先上案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEB前端：点击除指定元素外的其他地方，当前指定元素隐藏</title>
<script src="https://blog.mijupai.com/zb_system/script/jquery-2.2.4.min.js" type="text/javascript"></script>
<style>
.dn{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #f1f1f1ab;z-index: 99999;}
.dn div{margin: 20%;}
</style>
</head>
<body>
<div><button id="but01">点击出现浮层</button></div>
<div class="dn"><div id="but02"><p>我是被隐藏的内容</p></div></div>
<script>
$(document).ready(function(){
$("#but01").click(function(){
$(".dn").show();
})
})
</script>
</body>
</html>点击button后，直接显示被隐藏的内容
现在，开始做点击除div#but02外的区域，被隐藏的内容再次被隐藏
首先，要在点击除dn以外的元素时，内容就隐藏
$(document).click(function(){
$(".dn").hide();
});然后，需要在点击but02时，禁止隐藏操作
$("#but02").click(function(event){
event.stopPropagation();
});由此，就实现了点击除指定元素外的其他地方，当前指定元素隐藏,再次点击指定按钮，再次显示隐藏的内容时，需要中断其他event事件
最后附上综合源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEB前端：点击除指定元素外的其他地方，当前指定元素隐藏</title>
<script src="https://blog.mijupai.com/zb_system/script/jquery-2.2.4.min.js" type="text/javascript"></script>
<style>
.dn{display: none; position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #f1f1f1ab;z-index: 99999;}
.dn div{margin: 20%;}
</style>
</head>
<body>
<div><button id="but01">点击出现浮层</button></div>
<div class="dn"><div id="but02"><p>我是被隐藏的内容</p></div></div>
<script>
$(document).ready(function(){
$("#but01").click(function(){
$(".dn").toggle();
event.stopPropagation();
})
$(document).click(function(){
$(".dn").hide();
});
$("#but02").click(function(event){
event.stopPropagation();
});
})
</script>
</body>
</html>