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

最新推荐文章于 2021-12-23 09:27:32 发布

阿聪世家

最新推荐文章于 2021-12-23 09:27:32 发布

阅读量1.6k

点赞数 1

分类专栏：网站常用jquery效果文章标签： web前端开发 jQuery 弹出层

本文链接：https://blog.csdn.net/congcong875/article/details/9986759

版权

网站常用jquery效果专栏收录该内容

52 篇文章 0 订阅

订阅专栏

点击弹出层外区域关闭弹出层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>