首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery - 页面弹框 - 阻止事件冒泡示例

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

作者头像
Devops海洋的渔夫
发布2019-05-30 21:56:30
3.3K0
发布2019-05-30 21:56:30
举报
文章被收录于专栏:Devops专栏Devops专栏

需求

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

  • 一个点击按钮,点击可以弹出一个弹框
  • 弹框固定出现在页面的中间位置
  • 需要写一个背景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> 
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.04.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求
  • 编写基本html + css
  • 编写点击#btn按钮,显示弹框.pop_con
  • 编写点击弹框外部,则隐藏
  • 解决#btn的事件冒泡,使用return false;
  • 阻止.pop弹框的click()事件,直接return false,就可以避免点击弹框的时候执行$(document).click()里面的fadeOut()事件
  • 验证点击$(document)的click()事件是否会冒泡至下方的元素.pop
  • 最后,编写弹框右上角的× 号,点击则隐藏弹框
  • 完整代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档