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

源码

效果图：

　　鼠标未移入时：

　　　　　　　　

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

　　　　　　　　

关于Bootstrap的悬浮窗口(popover)的更多相关文章

  1. Android悬浮窗口的实现

    效果图:(悬浮框可拖动) 在项目开发中有一个需求:弹出悬浮窗后,响应悬浮窗的事件再弹出对话框,但是对话框怎么也不显示.也就是说在弹出悬浮框的同时,不能再弹出对话框,可能的原因: 1.悬浮框的焦点在最前 ...

  2. Android中悬浮窗口

    调用WindowManager,并设置WindowManager.LayoutParams的相关属性,通过WindowManager的addView方法创建View,这样产生出来的View根据Wind ...

  3. Android中悬浮窗口的实现原理和示例代码

    用了我一个周末的时间,个中愤懑就不说了,就这个问题,我翻遍全球网络没有一篇像样的资料,现在将实现原理简单叙述如下: 调用WindowManager,并设置WindowManager.LayoutPar ...

  4. SharePoint webpart中悬浮窗口的webconfig路径

    SharePoint webpart中悬浮窗口的webconfig路径在.../_layouts/15/下.

  5. Delphi 悬浮窗口、浮动窗口的实现

    源:Delphi 悬浮窗口.浮动窗口的实现 浮动窗体的实现 http://blog.tianya.cn/blogger/post_show.asp?BlogID=68097&PostID=80 ...

  6. 如何用C#做一个悬浮窗口程序

    用C#做一个像FlashGet的悬浮窗口,其实很简单,不像以前需要调用很多系统API.大致的步骤如下. 首先是主窗体部分,即要判断窗体的状态来决定是否显示悬浮窗口. 局部成员声明: private F ...

  7. Atitit. 悬浮窗口的实现 java swing c# .net c++ js html 的实现

    Atitit. 悬浮窗口的实现 java swing c# .net c++ js html 的实现 1. 建立悬浮窗口引用代码 1 1.1. 定义悬浮窗口,设置this主窗口引用,是为了在悬浮窗口中 ...

  8. Android中可自由移动悬浮窗口的实现

    http://www.xsmile.net/?p=538   调用WindowManager,并设置WindowManager.LayoutParams的相关属性,通过WindowManager的ad ...

  9. Android 悬浮窗口

    Android 悬浮窗口 一.创建悬浮窗口步骤    1.实现一个ViewGroup类,作为悬浮窗口的界面类,以便在里面重写onInterceptTouchEvent和onTouchEvent方法,实 ...

随机推荐

  1. Mysql update from

    UPDATE tab1   a INNER JOIN tab_game_version as b ON a.id=b.id SET a.advert_data=0 where a.advert_dat ...

  2. java防范跨站脚本攻击(XSS)

    网络中心提示网站有数目众多的跨站脚本攻击(XSS)漏洞,经过查看代码,认为是JSP中绑定变量是未经处理直接写入的,而且整个项目中这样的做法太多,因为是多年前的,不好一个个更改,参照网上资料,通过加fi ...

  3. 【Vue】环境搭建、项目创建及运行

    一.软件下载 1. 进入官网https://nodejs.org/en/下周node.js,傻瓜式安装步骤(一直下一步就好) 2. 进入官网http://www.dcloud.io/下载并安装编辑器H ...

  4. 从源码层面解析SpringIOC容器

    Spring IOC容器继承关系图 MessageSource支持消息国际化.ResouceLoader资源加载.BeanFactory创建Bean.ApplicationEventPublisher ...

  5. 用AndroidSDK中的Face Detector实现人脸识别

    很多手机图片管理应用都开始集成人脸识别功能.一提到人脸识别,模式识别,滤波,BlahBlah 一堆复杂的技术名字戳入脑海中,立刻觉得这玩意儿没法碰,太玄乎了.其实Android SDK从1.0版本中( ...

  6. 深入了解Looper、Handler、Message之间关系

    深入了解Looper.Handler.Message之间关系 前言及简介 上个星期我们整个项目组趁着小假期,驱车去了江门市的台山猛虎峡玩了两个多钟左右极限勇士全程漂流,感觉真得不错,夏天就应该多多玩水 ...

  7. Homebrew设置代理

    在终端上输入环境变量: export ALL_PROXY=socks5://127.0.0.1:1080 注意:这个只在当前生效,关闭终端就不行了. 原理:本身使用curl进行访问,所以通过环境变量能 ...

  8. docker 日志管理

    高效的监控和日志管理对保持生产系统持续稳定地运行以及排查问题至关重要. 在微服务架构中,由于容器的数量众多以及快速变化的特性使得记录日志和监控变得越来越重要.考虑到容器短暂和不固定的生命周期,当我们需 ...

  9. 判断checkbox是否被选中

    jquery判断checked的三种方法: .attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop( ...

  10. solr实时更新mysql数据的方法

    第一步:创建core core是solr的特有概念,每个core是一个查询数据,.索引等的集合体,你可以把它想象成一个独立数据库,我们创建一个新core:名字[core1] 进入linux命令行,进入 ...