jQuery点击空白处隐藏弹出层

来源：互联网发布：手机有淘宝助理吗编辑：程序博客网时间：2024/05/20 00:12

前言

一款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>

比较

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

阅读全文

1 0