js实现点击空白处隐藏

部分业务要求除了某元素外点击其他对象，对应的元素隐藏，下面是一个demo效果，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <style type="text/css">
        .fun-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;}
        .maskTask{width: 100%;position: fixed;opacity: .5;left: 0;top: 0;height: 100%;z-index: 1;background-color: #000;display: none;}
        .maskCone{width: 70%;position: fixed;background-color: #fff;z-index: 2;height: 30%;left: 15%;top: 5%;border-radius: 5px;padding: 10px 20px;display: none;}
        #btns{padding: 2px 8px;border-radius: 3px;}

    </style>
</head>
<body>
<div class="fun-set-bg">
    demo样式-
    <button class="starts">出现</button>
</div>
<div class="maskTask"></div>
<div class="maskCone">
    <p>阿部察察错错</p>
    <button id="btns">取消</button>
</div>
<script type="text/javascript" src="../../js/jquery_v3.3.1.js"></script>

<script>
$(function(){
    $(".starts").click(function(event){
        var e=window.event || event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }   
        $(".maskCone,.maskTask").show();
    });
    $(".maskCone").click(function(event){
        var e=window.event || event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    });
    $(document).click(function(event) {
        $(".maskCone,.maskTask").hide();
    });
   $('#btns').click(function(event) {
        $(".maskCone,.maskTask").hide();
    });
})
</script>
</body>
</html>

 

posted on 2019-05-07 16:26  婧星  阅读(2900)  评论(0)    收藏  举报

导航