js实现点击空白处隐藏

最新推荐文章于 2023-08-04 10:56:12 发布

奥特曼在敲代码

最新推荐文章于 2023-08-04 10:56:12 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript jquery

本文链接：https://blog.csdn.net/g977445x/article/details/122061070

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网页特效展示中心</title>
    <style type="text/css">
        * {
            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="./jquery.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) { // Mark 1
                    //$('#divTop').slideUp('slow');  //滑动消失
                    $('#divTop').hide(1000); //淡出消失
                }
            });
        })
    </script>
</body>

</html> from：http://www.wufangbo.com/js-dan-ji-yin-chang/