关于Bootstrap的悬浮窗口(popover) 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>悬浮窗口</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />

    </head>

    <body>
        <a href="#"   id="abc" class="btn btn-lg btn-danger" data-toggle="popover"  >xxxxxx</a>
            <!--JavaScript插件都是依赖与jQuery库-->
            <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
            <script type="text/javascript" src="js/bootstrap.min.js"></script>
            <script>
                /**
                     * $(function() {
                                alert($('[data-toggle="popover"]').attr("data-toggle")); 
                     */

                $(function() {
                    $("[data-toggle='popover']").each(function() {
                        var element = $(this);
                        element.popover({
                            trigger: 'manual',
                            html: true,
                            title: 'kkkk',
                            placement: 'bottom',
                            content: function() {
                                return content();
                            }
                        }).on("mouseenter", function() {
                            var _this = this;
                            $(this).popover("show");
                            $(this).siblings(".popover").on("mouseleave", function() {
                                $(_this).popover('hide');
                            });
                        }).on("mouseleave", function() {
                            var _this = this;
                            setTimeout(function() {
                                if(!$(".popover:hover").length) {
                                    $(_this).popover("hide")
                                }
                            }, 100);
                        });

                    });

                });  
                //模拟动态加载内容(真实情况可能会跟后台进行ajax交互)  
                function  content()  {      
                    var  data  =  $("<form><ul><li><span aria-hidden='true' class='icon_globe'></span>&nbsp;<font>粉丝数:</font>7389223</li>"  +                "<li><span aria-hidden='true' class='icon_piechart'></span>&nbsp;<font>关注:</font>265</li>"  +                "<li><span aria-hidden='true' class='icon_search_alt'></span>&nbsp;<font>微博:</font>645</li>"  +                "<li><span aria-hidden='true' class='icon_pens_alt'></span>&nbsp;<font>所在地:</font>台湾</li>"  +                "<input id='btn' type='button' value='关注' onclick='test()'/></form>");            
                    return  data;  
                }  
                //模拟悬浮框里面的按钮点击操作  
                function  test()  {      
                    alert('关注成功');  
                }
            </script>

            <div></div>

    </body>

</html>
源码

效果图：

　　鼠标未移入时：

　　　　　　　　

 

　　 当鼠标移入(悬停)在上面时：

　　　　　　　　

 

posted @ 2017-06-11 20:28  美琳  阅读(9342)  评论(2)  编辑  收藏  举报