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

PetitQ HTML/CSS 2019-9-24 1.60K 0 0

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

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

也想出现在这里？联系我们吧

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

弹出层的宽度固定屏幕占比，设置 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();
```
```
            }
```
```
})
```

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

已有 399 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

HTML/CSS

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

说明：

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

相关文章

Flexbox 可视化信息图

超级有意思经典代码注释图

jQuery判断鼠标向上滚动并浮动导航

发表回复取消回复

热销模板

HTML/CSS

说明：

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复