关于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> <font>粉丝数:</font>7389223</li>" + "<li><span aria-hidden='true' class='icon_piechart'></span> <font>关注:</font>265</li>" + "<li><span aria-hidden='true' class='icon_search_alt'></span> <font>微博:</font>645</li>" + "<li><span aria-hidden='true' class='icon_pens_alt'></span> <font>所在地:</font>台湾</li>" + "<input id='btn' type='button' value='关注' onclick='test()'/></form>");
return data;
}
//模拟悬浮框里面的按钮点击操作
function test() {
alert('关注成功');
}
</script> <div></div> </body> </html>
源码
效果图：
鼠标未移入时：
当鼠标移入(悬停)在上面时：
关于Bootstrap的悬浮窗口(popover)的更多相关文章
- Android悬浮窗口的实现
效果图:(悬浮框可拖动) 在项目开发中有一个需求:弹出悬浮窗后,响应悬浮窗的事件再弹出对话框,但是对话框怎么也不显示.也就是说在弹出悬浮框的同时,不能再弹出对话框,可能的原因: 1.悬浮框的焦点在最前 ...
- Android中悬浮窗口
调用WindowManager,并设置WindowManager.LayoutParams的相关属性,通过WindowManager的addView方法创建View,这样产生出来的View根据Wind ...
- Android中悬浮窗口的实现原理和示例代码
用了我一个周末的时间,个中愤懑就不说了,就这个问题,我翻遍全球网络没有一篇像样的资料,现在将实现原理简单叙述如下: 调用WindowManager,并设置WindowManager.LayoutPar ...
- SharePoint webpart中悬浮窗口的webconfig路径
SharePoint webpart中悬浮窗口的webconfig路径在.../_layouts/15/下.
- Delphi 悬浮窗口、浮动窗口的实现
源:Delphi 悬浮窗口.浮动窗口的实现 浮动窗体的实现 http://blog.tianya.cn/blogger/post_show.asp?BlogID=68097&PostID=80 ...
- 如何用C#做一个悬浮窗口程序
用C#做一个像FlashGet的悬浮窗口,其实很简单,不像以前需要调用很多系统API.大致的步骤如下. 首先是主窗体部分,即要判断窗体的状态来决定是否显示悬浮窗口. 局部成员声明: private F ...
- Atitit. 悬浮窗口的实现 java swing c# .net c++ js html 的实现
Atitit. 悬浮窗口的实现 java swing c# .net c++ js html 的实现 1. 建立悬浮窗口引用代码 1 1.1. 定义悬浮窗口,设置this主窗口引用,是为了在悬浮窗口中 ...
- Android中可自由移动悬浮窗口的实现
http://www.xsmile.net/?p=538 调用WindowManager,并设置WindowManager.LayoutParams的相关属性,通过WindowManager的ad ...
- Android 悬浮窗口
Android 悬浮窗口 一.创建悬浮窗口步骤 1.实现一个ViewGroup类,作为悬浮窗口的界面类,以便在里面重写onInterceptTouchEvent和onTouchEvent方法,实 ...
随机推荐
- tomcat运行springboot项目war包
以最简单的spring boot demo项目来演示如何发布项目war包到tomcat,并成功运行(有很多小伙伴会出现404错误) 一.准备一个最简单的demo项目 在IDEA中新建一个项目,一直ne ...
- 部署WSUS服务（一）
引言:随着网络的发展,我们的生活也越来越离不开网络,但面临的安全威胁也越来越多.像去年爆发的针对Windows系统的勒索病毒(Wanna Cry)和年初爆发的Intel芯片漏洞告诉我们网络威胁时时刻刻 ...
- 网络基础 09_STP生成树协议
1 STP概念 冗余拓扑结构 冗余拓扑结构能解决单点故障的问题 冗余拓扑结构会引起广播风暴,多帧COPY,MAC地址表错误的问题 广播风暴 当主机X发送一个广播包后 交换机继续没完没了的更新广播流量 ...
- 基础概念——理解IP地址和域名
从程序员角度,可以把因特网看做是世界范围内的主机集合: 1)主机集合被映射为一组32位的IP地址. 2)这个IP地址被映射为一组称为因特网域名的标识符. 3)因特网主机上的进程能够通过连接和任何其他因 ...
- 终于解决了贴吧手机版的一个重大BUG
终于解决了贴吧手机版的一个重大BUG 别诧异虽然同一个域名,但是,PC 和手机打开完全不一样的体验 http://tieba.yunxunmi.com/ 吃点夜校准备做梦去!! 发现 我云贴吧 一个 ...
- 使用webpack && react环境
使用webpack webpack是一款模块化的打包工具,它认为所有的文件都是模块,包括js,css等等,版本为2.x推荐学习,1.x版本已废弃,不建议使用. 目前,facebook官方就是使用web ...
- Getway网关管理ZUUL
1.ZUUL微服务网关 微服务架构体系中,通常一个业务系统会有很多的微服务,比如:OrderService.ProductService.UserService...,为了让调用更简单,一般会在这些服 ...
- JAVA list对象排序加去重问题
对象类实现继承Comparable接口重写compareTo方法实现排序功能,重写equals方法实现去重功能(根据ID去重)public class TestAbilityAnalyze imple ...
- 个人常用的vba代码
只做备注 Sub general_sql_macro() Sql = "" column_name = "user_count" Sql = "ins ...
- leetcode简单题目两道(5)
Problem Given an integer (signed bits), write a function to check whether it . Example: Given num = ...