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

来源：互联网发布：sublime java插件编辑：程序博客网时间：2024/05/21 09:06

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

    <!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>

0 0