有关Bootstrap的漂浮窗口(popover)

图片 1图片 2

<!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>&nbsp;<font>粉丝数:</font>7389223</li>"  +                "<li>&nbsp;<font>关注:</font>265</li>"  +                "<li>&nbsp;<font>微博:</font>645</li>"  +                "<li>&nbsp;<font>所在地:</font>台湾</li>"  +                "<input id='btn' type='button' value='关注' onclick='test()'/></form>");            
                    return  data;  
                }  
                //模拟悬浮框里面的按钮点击操作  
                function  test()  {      
                    alert('关注成功');  
                }
            </script>

            <div></div>

    </body>

</html>

源码

效果图:

  鼠标未更换入常:

        图片 3

 

   当鼠标移入(悬停)在上头时:

        图片 4

 

相关文章