<!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. Java_锁Synchronized

    锁(synchronized):既然线程之间是并发执行,就必然会有资源冲突的时候,如果不加以限制,很可能会出现死锁现象,这时就需要锁来对线程获取资源的限制程序中,可以给类,方法,代码块加锁.1.方法锁 ...

  2. GoLand 调试 Go

    Goland 调试 Go 从百度得知 VS Code 不能很好的支持 Go 的调试真让人肝儿疼 -- 引言 准备 Win 10 Pro Go(Version 1.10) GoLand(2018.3) ...

  3. 协作式取消 CancellationTokenSource

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. FindLine把多行查找改为多行替换

    Sub FindLine() Dim textSelection As TextSelection textSelection = DTE.ActiveDocument.Selection textS ...

  5. 浏览器缓存如何控制? && 在url框中回车、F5 和 Ctrl + F5的区别是什么?

    第一部分: 浏览器缓存如何控制?   最近在做网站,但是不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存   说明: 浏览器向服务器请求 ...

  6. java动态加载机制

    假设有一个class,ClassLoader首先把它load到内存里的code segment(内存里存放代码段的),站在ClassLoader的角度,内存里的一个一个的class就是一个一个的对象, ...

  7. monitorenter与monitorexit指令

  8. VMware虚拟机配置

    VMware虚拟机配置 背景 在做学习Linux时经常会在win环境下安装虚拟机,这其中涉及到一些细节操作,需要对虚拟机工作模式加以理解. 本文在学习hadoop分布式环境搭建时写作. 1.虚拟交换机 ...

  9. Java接口的简单理解和总结

    1.抽象层次:普通类 -> 抽象类 -> 接口 普通类:就是我们常用的类: 抽象类:专门用来被子类继承的,主要是为了符合现实世界的规律 如: Animal类:(每个现实的对象都有类与它相对 ...

  10. NSSM - the Non-Sucking Service Manager

    nssm is a service helper which doesn't suck. srvany and other service helper programs suck because t ...