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

Devops海洋的渔夫

发布于 2019-05-30 21:56:30

4.1K0

文章被收录于专栏：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隐藏

编写#btn的click()事件

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

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

写了点击外部$(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)部分并不会至上而下得触发到.pop的click()方法，从而直接执行$(document)内的fadeOut,并没有弹出.pop的alert()。

点击.pop的click()方法，触发了alert()事件，如下:

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

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

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

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

点击#close后，正常执行fadeOut()，并且在.pop处已经截断了事件冒泡，所以在#close的 click()最后不用写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 删除

jquery

css

html

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

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

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

jquery

css

html

登录后参与评论

0 条评论

热度