点击空白处隐藏弹窗div

如何点击空白处或其他地方隐藏弹出的弹出框呢？

以下代码使用方便，只需要在按钮上追加class “popclick”，在要显示的元素上追加class “pop”,就行了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://www.ppblog.cn/public/js/jquery-1.11.3.min.js" type="text/javascript"></script>
 
<script>
//点击空白处隐藏弹出框-begin-------------------------
$(function () {
    $(document).bind("mousedown", function (e) {        
        var target = $(e.target);
        if (target.closest(".pop1").length == 0) {
            $(".pop1").hide();
            $(".pop1").addClass("pop");
            $(".pop1").removeClass("pop1");
        }
    });
    $(".popclick").click(function () {
        $(".pop").addClass("pop1");
        $(".pop1").removeClass("pop");
 
    });
});
//点击空白处隐藏弹出框-end-----------------------
     
//--------------------------------------------
$(function () {
    $('.ac1').click(function(){
        $('.c1').show();
    });
    $('.ac2').click(function(){
        $('.c2').show();
    });
});
</script>
<style>
.pop,.pop1{display:none;}
</style>
</head>
 
<body>
<a class="ac1 popclick">显示1</a>
<a class="ac2 popclick">显示2</a>
<div class="c1 pop">以显示1</div>
<div class="c2 pop">以显示2</div>
 
<p>
说明：只需要在按钮上追加class  popclick，在要显示的元素上追加class pop,就行了
</p>
</body>
</html>

转载出处:http://www.ppblog.cn/hide-pop.html

posted @ 2015-10-09 16:20  艾小麦  阅读(124)  评论(0)    收藏  举报