WEB前端:点击除指定元素外的其他地方,当前指定元素隐藏

一个项目,需要用到一个弹窗系统,该系统在使用时,点击某按钮后,指定元素显示并在最高浮层,点击除当前元...

一个项目,需要用到一个弹窗系统,该系统在使用时,点击某按钮后,指定元素显示并在最高浮层,点击除当前元素外的区域时,当前指定元素隐藏。

先上案例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WEB前端:点击除指定元素外的其他地方,当前指定元素隐藏</title>
    <script src="https://blog.mijupai.com/zb_system/script/jquery-2.2.4.min.js" type="text/javascript"></script>
    <style>
        .dn{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #f1f1f1ab;z-index: 99999;}
        .dn div{margin: 20%;}
    </style>
</head>
<body>
    <div><button id="but01">点击出现浮层</button></div>
    <div class="dn"><div id="but02"><p>我是被隐藏的内容</p></div></div>
    <script>
        $(document).ready(function(){
            $("#but01").click(function(){
                $(".dn").show();
            })
        })
    </script>
</body>
</html>

点击button后,直接显示被隐藏的内容


现在,开始做点击除div#but02外的区域,被隐藏的内容再次被隐藏

首先,要在点击除dn以外的元素时,内容就隐藏

            $(document).click(function(){
                $(".dn").hide();
            });

然后,需要在点击but02时,禁止隐藏操作

            $("#but02").click(function(event){
                event.stopPropagation();
            });

由此,就实现了点击除指定元素外的其他地方,当前指定元素隐藏,再次点击指定按钮,再次显示隐藏的内容时,需要中断其他event事件


最后附上综合源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WEB前端:点击除指定元素外的其他地方,当前指定元素隐藏</title>
    <script src="https://blog.mijupai.com/zb_system/script/jquery-2.2.4.min.js" type="text/javascript"></script>
    <style>
        .dn{display: none; position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #f1f1f1ab;z-index: 99999;}
        .dn div{margin: 20%;}
    </style>
</head>
<body>
    <div><button id="but01">点击出现浮层</button></div>
    <div class="dn"><div id="but02"><p>我是被隐藏的内容</p></div></div>
    <script>
        $(document).ready(function(){
            $("#but01").click(function(){
                $(".dn").toggle();
                event.stopPropagation();
            })
            $(document).click(function(){
                $(".dn").hide();
            });
            $("#but02").click(function(event){
                event.stopPropagation();
            });

        })
    </script>
</body>
</html>


评论