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();
            }
})
最高¥2000红包
限量
云产品通用,可叠加官网常规优惠使用 | 限时领取
相关文章

通过JS实现一键复制指定内容新手教程

阅读 62

经常会见到网站上各种“一键复制”的友好体验按钮,不局限于code 的复制,这样友好的体验,方便快捷的操作...博文来自:建站经验

宝塔BT面板如何有效的清除SSL证书以及缓存新手教程

阅读 53

大鸟有一台机器是5.9升级的6.X的,因为证书还有7天到期,顺手就手动申请了证书,可是怪异的事情发生了,...博文来自:建站经验

通过JS判断浏览器语言后跳转到对应语言(中文和英文)站点

阅读 95

应小伙伴留言版面里面需求写的东西,这种代码百度一下有很多,总结了下最容易理解的一种方法,也是兼容...博文来自:建站经验

WordPress用PHP几比较好呢?PHP7.1与7.2性能对比

阅读 59

去年就已经使用PHP7版本了,那时就说PHP7比老版本快了很多很多,在今年,又分别出了7.1和7.2版本,从 Wo...博文来自:wordpress教程,建站经验

火车头7.6版本如何设置定时采集发布教程

阅读 148

火车头是一款非常方便的采集软件,大家在使用火车头的时候会有一个疑问,他能不能定时采集,要不来回操...博文来自:建站经验

个人网站如何赚钱盈利 明确7种可实现赚钱渠道模式

阅读 179

从互联网开始就有个人网站的存在,我们也看到很多个人站长成功的案例,而且我们很多人也会不断的尝试和...博文来自:建站经验

中小站长如何防范黑客攻击,避免网站遭受损失?

阅读 193

安全一直以来都是各大站长们比较关心的问题,一个网站,如果没有一个安全的系统环境,做得再好,也没什...博文来自:建站经验

推荐几个不错的站长广告联盟

阅读 634

Google广告联盟 Google广Google AdSense 是一种获取收入的快速简便的方法,适合于各种规模的网站发布商...博文来自:建站经验,网站运营

Linux服务器安装宝塔面板

阅读 272

宝塔面板分Linux面板和Windows面板,免费版和专业版,安装宝塔面板前首先要访问宝塔官网查看对应版本进...博文来自:建站经验

网站没备案百度会收录吗?

阅读 396

答:会收录,互联网不是局域网,如果百度只收录备案的网站,那么估计很快就会被其他搜索引擎吃光市场。...博文来自:建站经验

我爱模板网 从零开始学建站,学习技能、解决问题!

每个月,我们帮助开发者解决各种各样的技术问题。并助力他们在技术能力上获得提升。
没有账号? 忘记密码?

社交账号快速登录