随笔- 21 文章- 1 评论- 86 阅读- 12737

点击空白处隐藏层-(依旧取名废)

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px auto;
            padding: 0px;
        }
        #btnshow{
            margin: 100px auto;
            width: 90px;
            display: block;
        }
        #divTop{
            width: 400px;
            height: 200px;
            position: absolute;
            margin-top: -100px;
            margin-left: -200px;
            border: 1px solid gray;
            color:#333333;
            top:50%;
            left: 50%;
            background: #efefef;

        }

    </style>
</head>
<body>

<input type="button" value="点击" id="btnshow"/>
<div id="divTop">
    点击空白隐藏层!!!
</div>



<script src="jquery-1.8.3.js"></script>
<script>
    $(function(){
        $('#btnshow').click(function(event){
            //取消事件冒泡
            event.stopPropagation();
            //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
            $('#divTop').toggle('slow');

            return false;
        });
        //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
        $(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>