jQuery点击空白处隐藏弹出层

最新推荐文章于 2022-05-31 16:55:54 发布

front_end_fan

最新推荐文章于 2022-05-31 16:55:54 发布

阅读量641

点赞数 1

分类专栏： jquery 文章标签： jquery 应用 javascript 点击空白处

本文链接：https://blog.csdn.net/qq_39198420/article/details/77977958

版权

jquery 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

前言

一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。

方法一

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>front_end_fan</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #btnShow{
            margin: 100px auto 0;
            width: 90px;
            display: block;
        }
        #divTop{
            border: 2px solid #666666;
            position: absolute; display: none;
            width: 400px;
            height: 200px;
            color: #333;
            background: #efefef;
            padding-top: 10px;
            text-align: center;
            font: 16px/30px "微软雅黑";
            margin-top: -105px;
            margin-left: -200px;
            left: 50%;
            top: 50%;
        }
    </style>
</head>
<body>
    <input type="button" id="btnShow" value="弹出框按钮" />
    <div id="divTop">
        点击空白区域弹出层关闭！
    </div>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script >
    $(function () {
        $('#btnShow').click(function (event) {
            //取消事件冒泡
            event.stopPropagation();
            //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
            $('#divTop').toggle('slow');
//            return false;
        });
        //点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
        $(document).click(function(event){
            var _con = $('#divTop');   // 设置目标区域
            if(!_con.is(event.target) && _con.has(event.target).length === 0){ // 被点击区域 既不是目标区域，也不是包含在目标区域内部！
                //$('#divTop').slideUp('slow');   //滑动消失
                $('#divTop').hide(1000);          //淡出消失
            }
        });
    })
</script>
</body>
</html>

方法二

<!DOCTYPE html>
<html>
<head>
    <title>点击空白处关闭弹出层</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #box{width:300px;height:200px;border:1px solid #000;display:none;}
        .btn{color:red;}
    </style>
    <script type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".btn").click(function(event){
                var e=window.event || event;
                if(e.stopPropagation){
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                }
                $("#box").show();
            });
            $("#box").click(function(event){
                var e=window.event || event;
                if(e.stopPropagation){
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                }
            });
            document.onclick = function(){
                $("#box").hide();
            };
        })
    </script>
</head>
<body>
    <div id="box"></div>
    <button class="btn">点击此处打开弹出层</button>
    <br><br><br><br>
    <br>点击空白处关闭弹出层
</body>
</html>

比较

关于两种方法的优劣，请读者留言评论。

front_end_fan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery点击空白处隐藏弹出层

前言一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。方法一<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>front
复制链接

扫一扫