点击弹出层外区域关闭弹出层jquery特效示例

2019/6/29 22:42:49

编程Tag： 层外区域关闭弹出层 jquery特效

本文主要是介绍点击弹出层外区域关闭弹出层jquery特效示例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

点击弹出层外区域关闭弹出层jquery特效,废话不说，上代码，简洁明了：

 
<html> 
<head> 
<style> 
.hide{display:none;} 
.con{width:500px;height:300px;background:#000;} 
</style> 
<title>点击弹出层 ，点击弹出层外区域关闭弹出层jquery特效</title> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("div.down").click(function(e) { 
e.stopPropagation(); 
$("div.con").removeClass("hide"); 
}); 
$("div.con a").click(function() { 
$("div.con").addClass("hide"); 
}); 

$(document).click(function() { 
if (!$("div.con").hasClass("hide")) { 
$("div.con").addClass("hide"); 
} 
}); 

$("div.con").click(function (e) { 
e.stopPropagation();//阻止事件向上冒泡 
}); 


}); 
</script> 
</head> 
<body> 
<div class="down">click</div> 
<div class="con hide">show-area 
<a style="color:#fff;">关闭</a> 

</div> 
</body> 
</html> 

这篇关于点击弹出层外区域关闭弹出层jquery特效示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

点击弹出层外区域关闭弹出层jquery特效示例

相关编程文章