主页 > 教程合集 > Html/css >

JS实现点击弹出层再点击任意位置隐藏弹出层

时间:2019-08-08 阅读:0

我们经常使用到弹出层。对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度。我们在使用的时候需要注意几个弹出层的注意点:

JS实现点击弹出层再点击任意位置隐藏弹出层

弹出层的界面需要统一,不一致的弹出层并不能增加美感,相反还会显得页面布局更加杂乱无章;

弹出层的设计一定要好看,按钮要符合项目的主色调;

弹出层的宽度固定屏幕占比,设置max-width,高度根据内容自适应;

点击其他区域能隐藏弹出层。

今天,主要说说点击其他区域隐藏弹出层。余斗被这个效果折磨了很久,皆是因为对事件冒泡的理解不够已经错误处理。

什么是事件冒泡?为什么要使用它?

事件冒泡:由最具体的元素接收(当前节点),然后逐级向上传播至最不具体的元素的节点(document);

在实现点击其他区域隐藏弹出层时,需要对document绑定点击事件,而事件冒泡会使点击其它节点时仍然触发该事件,从而造成事件冲突,导致该显示弹出层时显示不出,不该隐藏时却又隐藏了弹出层。


<style type="text/css">
        .layer-container{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content; center;
                align-items: center;
                display: none;
        }
        .layer-main{
                width: 75%;
                padding: 20px;
                max-width: 400px;
        }
</style>

<body>
<button>显示弹出层</button>

<div class="layer-container">
        <div class="layer-main">
                  <div class="layer-header"></div>
                  <div class="layer-content"></div>
                  <div class="layer-footer">
                          <div class="layer-button">确认</div>
                </div>
        </div>
</div>

<script>
        //点击按钮,显示弹出层
        $("button").bind("click", function(){
                $(".layer-container").css("display", "flex");
                event.stopPropagation();//==========阻止冒泡1
        })
        //点击其他区域,隐藏弹出层
        $(document).bind("click", function(){
                $(".layer-container").css("display", "none");
        })
        //点击弹出层内确认按钮
        $(".layer-button").bind("click", function(){
                console.log("点击了确认按钮")
        })
        //给弹出层绑定点击事件,阻止冒泡
        $(".layer-main").bind("click", function(){
                event.stopPropagation();//==========阻止冒泡2
        })
</script>
</body>
 

说明:

$(document)即给整个文档绑定点击事件,点击则隐藏弹出层container;

$("button")给按钮绑定点击事件,点击即显示弹出层container;

此处必须加event.stopPropagation()阻止冒泡,否则先执行button的事件显示弹出层container,又向上冒泡执行document事件隐藏弹出层container,导致最终点击没有效果;

$(".layer-main")给弹出层main绑定点击事件,点击它或冒泡到它时,即阻止继续冒泡到document;

此处的点击事件以及阻止冒泡必须加,否则点击弹出层main或里面的其他节点,都会冒泡到document,从而隐藏弹出层container,导致事件紊乱。

其实,还可以通过事件的目标(event.target)来识别当前点击的节点,从而进行接下来的操作,比如对指定的节点的特殊操作

==>>除指定区域外点击任何区域都隐藏div:


$('body').click(function(e) {
        var target = $(e.target);
        // 如果#layer或者#btn下面还有子元素,可使用
        // !target.is('#btn *') && !target.is('#layer *')
        if(!target.is('#btn') && !target.is('#layer')) {
              if ( $('#layer').is(':visible') ) {
                        $('#layer').hide();
              }
        }
});

$('body').click(function(e) {
      if(e.target.id != 'btn' && e.target.id != 'overlay')
            if ( $('#layer').is(':visible') ) {
                  $('#layer').hide();
            }
})
 

本站所有资源均在余斗淘宝店铺有售,你可以扫描以下店铺二维码直接选购,自动极速发货。你也可以微信扫描二维码添加好友,直接微信索取更便捷!

余斗微信二维码

扫描微信加好友购买
了解更多

余斗淘宝店铺二维码

淘宝扫描二维码购买
自动发货

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2019-08-08最后更新,转载注明出处。

相关推荐

下一篇:没有了
返回顶部