点击按钮div层弹出，点击空白处div隐藏

时间 2019-12-07 标签点击按钮 div 弹出空白隐藏

实现效果：点击按钮div层弹出，点击空白处div隐藏。
如下是代码:javascript

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        //样式很丑本身从新定义
        #divTop{position: absolute;top: 50px;left:20px;height: 200px;width: 100px;background: #000000}
        <style>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btnShow").click(function(event){
                    //取消冒泡事件
                    event.stopPropagation();//这句是必须
                    //若css已经给divTop定位则不须要再定位
                    var offset = $(event.target).offset();$("#divTop").css({top:offset.top+$(event.target).height+"px",left:offset.left});
                    $("#divTop").slideToggle();
                });

                 //点击空白或者其余区域时divTop隐藏
                $(document).click(function(){
                    $("#divTop").slideUp('slow');
                });
            //点击divTop自身隐藏
                $("#divTop").click(function(){
                    $(this.fadeOut(1000));
                })
            });
        </script>
    </head>
    <body>
    <div>
        <input type="button" id="btnShow" value="显示提示内容">
    </div>
    <div id="divTop">

    </div>
    <div>点击隐藏div或者点击空白处隐藏div</div>
    </body>
    </html>