专栏首页Devops专栏jquery - 页面弹框 - 阻止事件冒泡示例

jquery - 页面弹框 - 阻止事件冒泡示例

需求

编写一个简单的页面弹框的示例,功能要求如下:

  • 一个点击按钮,点击可以弹出一个弹框
  • 弹框固定出现在页面的中间位置
  • 需要写一个背景mask,用于遮掩背景,设置透明度0.3
  • 点击弹框外的位置,弹框就可以消失不见,可以使用fadeOut()
  • 点击弹框内的文本框可以输入内容,弹框不会消失不见
  • 点击弹框右上角的 × 号,则关闭弹框

看完了需求,首先快速写好一波html + css

编写基本html + css

基本html+css的代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        
    </script>
    <style type="text/css">
        
        .pop_con{
            /*display: none;*/
        }

        .pop{
            width: 300px;
            height: 300px;
            background-color: #fff;
            border:3px solid #000;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
            z-index: 9999;
        }

        .pop_con .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgb(0,0,0,0.3);
            z-index: 9990;
        }

        #close{
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 16px;
            font-weight: 755;
            color: red;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <input type="button" name="" value="弹出" id="btn">

    <div class="pop_con">
        <div class="pop">
            <label>用户信息:</label>
            <input type="text" name="" value="" id="search" placeholder="请输入查询的信息">
            <a href="#" id="close">×</a>
        </div>
        <div class="mask"></div>
    </div>


</body>
</html> 

好了,下一步就是设置.pop_con隐藏,设置display:none,然后编写jquery,设置点击按钮#btn ,触发click()事件的时候,设置.pop_con使用fateIn()显示。

编写点击#btn按钮,显示弹框.pop_con

  • 首先设置.pop_con隐藏
  • 编写#btnclick()事件

好了,这里已经实现了点击显示的操作了,那么下一步要编写点击弹框的其他部分,则弹框隐藏。

编写点击弹框外部,则隐藏

写了点击外部$(document)就隐藏的事件发现,当点击#btn的按钮,触发了fadeIn()方法显示弹框。但是,由于事件冒泡,这个click()一直冒泡到了$(documen),导致直接触发了$(document)click(),从而直接执行了fadeOut(),使得弹框出现一会又立即消失的情况。

解决#btn的事件冒泡,使用return false;

在阻止了#btn按钮的click()事件冒泡到$(document)之后,那么弹框就可以正常显示了。

同时,点击文档的任意一个地方都是可以隐藏弹框的。

但是,此时点击弹框内也是会让弹框消失的,那如果我要填写弹框的input框来写内容,还没写就消失了,这该怎么办呢?

阻止.pop弹框的click()事件,直接return false,就可以避免点击弹框的时候执行$(document).click()里面的fadeOut()事件

这个思路不涉及事件冒泡的阻止,但是属于同一个click()方法的阻止,因为点击$(document)click()事件应该不会冒泡到它下面的元素.pop,不过可以在这里验证一下。

验证点击$(document)click()事件是否会冒泡至下方的元素.pop

.pop写一个alert()就可以验证出来了。

点击.pop以外的$(document)部分并不会至上而下得触发到.popclick()方法,从而直接执行$(document)内的fadeOut,并没有弹出.popalert()

点击.popclick()方法,触发了alert()事件,如下:

执行完毕了alert()的事件之后,就继续冒泡将click()方法至下而上得冒泡至$(document),导致$(document)执行fadeOut()

在这个验证的过程中,更加确认了刚才在.pop使用return false;的确是用来阻止click()的冒泡至$(document)的。

最后,编写弹框右上角的× 号,点击则隐藏弹框

因为现在点击弹框都不会隐藏,所以可以单独给#close写一个click()方法,设置触发fadeOut()事件。

点击#close后,正常执行fadeOut(),并且在.pop处已经截断了事件冒泡,所以在#closeclick()最后不用写return false;

写到这里基本已经演示完了关于事件冒泡弹框示例了。

完整代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn").click(function(){
                $(".pop_con").fadeIn();
                return false;
            })

            $(document).click(function(){
                $(".pop_con").fadeOut();
            })

            $(".pop").click(function(){
                return false;
                // alert("pop!!");
            })

            $("#close").click(function(){
                $(".pop_con").fadeOut();
            })
        })
    </script>
    <style type="text/css">
        
        .pop_con{
            display: none;
        }

        .pop{
            width: 300px;
            height: 300px;
            background-color: #fff;
            border:3px solid #000;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
            z-index: 9999;
        }

        .pop_con .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgb(0,0,0,0.3);
            z-index: 9990;
        }

        #close{
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 16px;
            font-weight: 755;
            color: red;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <input type="button" name="" value="弹出" id="btn">

    <div class="pop_con">
        <div class="pop">
            <label>用户信息:</label>
            <input type="text" name="" value="" id="search" placeholder="请输入查询的信息">
            <a href="#" id="close">×</a>
        </div>
        <div class="mask"></div>
    </div>


</body>
</html> 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery cookie示例 - 只提示一次的弹框

    经常有些网站在访问的时候,就是有一个弹框介绍一下通知内容。然后点击已读之后,就不会再弹出了。

    Devops海洋的渔夫
  • CSS 制作雪碧图列表

    在日常开发列表中会有很多的小图片,例如上图列表中的1-5小图标。如果每个小图片都分为一个小图片进行请求。这样就需要请求5次服务器。

    Devops海洋的渔夫
  • CSS 特征布局实例 - 导航栏、新闻列表、淘宝布局

    重点:这里不能使用float:left的方式,因为这种方式不方便于居中。如果使用偏移的方式居中,当页数增加的时候,可能就不居中了。

    Devops海洋的渔夫
  • Python 字典

    IT故事会
  • python判断成绩给等级

    py3study
  • 微服务架构在Kubernetes上的实现

    我们讨论了最近的微服务趋势,以及伴随微服务架构可能出现的一些复杂问题。在接下来的几周内,我们将深入探讨这个问题。我们将探讨不同设计选择中固有的权衡,以及可以采取...

    美的让人心动
  • 【前端词典】4 个实用有趣的 JS 特性

    最近在学习的过程中发现了我之前未曾了解过的一些特性,发现有些很有趣并且在处理一些问题的时候可以给我一个新的思路。

    小生方勤
  • 行业丨当小程序碰上教育行业

    教育行业在中国一直以来都是一个充满竞争的行业,因为中国人口众多,教育需求自然就多,另外教育行业的进入门槛相对较低,引来了众多的创业者想要分一杯羹。而随着现目前中...

    极客小程序分享
  • 分布式架构之「 两阶段提交协议」

    两阶段提交协议是一种经典的强一致性中心化副本控制协议。虽然在工程中该协议有较多的问题,但研究该协议能很好的理解分布式系统的几个典型问题。

    猿哥
  • 支付宝支付-刷卡支付(条码支付)

    1、用户登录支付宝钱包,点击首页“付款”,进入付款码界面; 2、收银员在商家收银系统操作生成订单,用户确认支付金额; 3、用户出示钱包的“付款码”,收银员用...

    Javen

扫码关注云+社区

领取腾讯云代金券