提示框例子（点击型以及滑动型）

最新推荐文章于 2021-06-09 15:04:37 发布

qwcs163

最新推荐文章于 2021-06-09 15:04:37 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/qwcs163/article/details/45563547

版权

以下是点击型例子代码，点击按钮出现提示框，点击按钮以及提示框以外的其他地方，提示框消失。（重点在于防止事件冒泡）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="jquery-1.11.1.js" type="text/javascript"></script>
        <style type="text/css">
            body{padding:50px;font-family:"Microsoft YaHei";font-size:12px;}
            /*触发部分*/
            .clcik_part{width:100px;height:40px;background:#AAA;margin:50px;line-height:40px;text-align:center;cursor:pointer;}

            /*提示框主体*/
            .content{width:200px;min-height:40px;background:#CCFF99;position:absolute;padding:10px;display:none;}
            /*箭头*/
            .arrow_left{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:8px solid transparent;
             border-right-style:solid;border-right-color:#CCFF99;position:absolute;top:15px;left:-16px;}
            /*阴影*/
            .boxshadow{box-shadow: 2px 2px 4px #999;
                       -moz-box-shadow: 2px 2px 4px #999;
                       -webkit-box-shadow: 2px 2px 4px #999;
                       -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* For IE 8 */
                       }
            /*圆角*/
            .round {border-radius:5px;            /* W3C syntax */
                    -moz-border-radius:5px;      /* Gecko browsers */
                    -webkit-border-radius:5px;   /* Webkit browsers */
                    }
        </style>
    </head>
    <body>

        <div class="clcik_part">点我</div>

        <div class="content boxshadow round"><span class="arrow_left"></span>这是提示!</div>

        <script type="text/javascript">
            //触发div绑定点击事件 点击时提示框显示
            $(".clcik_part").click(function(){
                $(".content").css({"display":"block","top":$(this).offset().top,"left":$(this).offset().left+110});
                $(".content").show();
            });
            //点击其他地方提示框隐藏
            $(window.document).on('click',function(){
                $(".content").fadeOut(300);
            });
            //点击提示框以及触发区域时时不隐藏  阻止冒泡到document触发隐藏
            $(".content,.clcik_part").on('click',function(e){
                if (e.stopPropagation){
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                } 
            });
        </script>

    </body>
</html>

以下是滑动型例子代码，鼠标进入触发区域出现提示框，鼠标移出到触发区域以及提示框以外的其他地方，提示框消失。
重点在于鼠标移出触发区域但是进入提示框区域怎样保持提示框不消失。
我的办法是在鼠标移入提示框div时给其加一个css类，当鼠标移出触发区域时判断提示框有没有这个css类，如果有则不让提示框消失。
这时又遇到一个问题，怎么在触发提示框消失代码之前给提示框div加上这个类。我采取了两个措施：1.给提示框外套一个大一圈且透明的div,隐藏还是显示都操作这个div，确保这个div和触发区域div紧密贴合。2.也是最重要的一点，就是为了不让离开触发区域的触发在进入提示框区域的触发之前发生，用setTimeout函数延迟离开触发一会儿。
下面是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="jquery-1.11.1.js" type="text/javascript"></script>
        <style type="text/css">
            body{padding:50px;font-family:"Microsoft YaHei";font-size:12px;}
            /*触发部分*/
            .clcik_part{width:100px;height:40px;background:#AAA;margin:50px;line-height:40px;text-align:center;cursor:pointer;}

            /*提示框容器*/
            .content_panel{width:220px;position:absolute;padding:10px;display:none;}
            /*提示框内容载体*/
            .content{width:200px;min-height:40px;background:#CCFF99;position:relative;padding:10px;}
            /*箭头*/
            .arrow_left{display:block;overflow:hidden;width:0px;height:0px;padding:0;font-size:0;border:8px solid transparent;
             border-right-style:solid;border-right-color:#CCFF99;position:absolute;top:15px;left:-16px;}
            /*阴影*/
            .boxshadow{box-shadow: 2px 2px 4px #999;
                       -moz-box-shadow: 2px 2px 4px #999;
                       -webkit-box-shadow: 2px 2px 4px #999;
                       -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* For IE 8 */
                       }
            /*圆角*/
            .round {border-radius:5px;           /* W3C syntax */
                    -moz-border-radius:5px;      /* Gecko browsers */
                    -webkit-border-radius:5px;   /* Webkit browsers */
                    }
            /*标志类*/
            .active_content{display:block;}
        </style>
    </head>
    <body>

        <div class="clcik_part">移到这里</div>

        <div class="content_panel"><div class="content boxshadow round"><span class="arrow_left"></span>这是提示!</div></div>

        <script type="text/javascript">
            //触发区域
            $(".clcik_part").hover(
                function(){//鼠标移入
                    $(".clcik_part").addClass("active_content");
                    $(".content_panel").css({"display":"block","top":$(this).offset().top-10,"left":$(this).offset().left+99});
                    $(".content_panel").show();
                },
                function(){//鼠标移出
                    $(".clcik_part").removeClass("active_content");
                    setTimeout(function(){
                        if(!$(".content_panel").hasClass("active_content")){
                            $(".content_panel").fadeOut(300);
                        }
                    },5);
                }
            );
            //提示框区域
            $(".content_panel").hover(
                function(){//鼠标移入
                    $(".content_panel").addClass("active_content");
                },
                function(){//鼠标移出
                    $(".content_panel").removeClass("active_content");
                    setTimeout(function(){
                        if(!$(".clcik_part").hasClass("active_content")){
                            $(".content_panel").fadeOut(300);
                        }
                    },5);
                }
            );

        </script>

    </body>
</html>

qwcs163

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
提示框例子（点击型以及滑动型）

以下是点击型例子代码，点击按钮出现提示框，点击其他地方，提示框消失。html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> script src="jquery-1.11.1.js" type="text/javascript">script>
复制链接

扫一扫