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

最新推荐文章于 2022-04-27 11:53:45 发布

一颗榛子

最新推荐文章于 2022-04-27 11:53:45 发布

阅读量1.3w

点赞数 1

文章标签：编辑器

本文链接：https://blog.csdn.net/halze_eyes/article/details/52440609

版权

实现效果：点击按钮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>

一颗榛子

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
点击按钮div层弹出，点击空白处div隐藏

实现效果：点击按钮div层弹出，点击空白处div隐藏。以下是代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> //样式很丑自己重新定义 #divTop{position: absolute;top
复制链接

扫一扫