免费刷金币,请点击这里
TE社区 > 前端技术
客服QQ:1206116161

使用BootStrap实现悬浮窗口的效果

Noprinciple 于 2018-05-23 16:00:03 创建话题
(87)
(0)
举报

经常玩社群网站的想必对这样一种场景很常见,如图:

鼠标停在某个超链接上,然后会出现一个悬浮框,内容时该账号的一些信息。

刚好最近在做一些前端的东东,涉及到类似的需求。——鼠标悬停,出现一个悬浮框,悬浮框描述一些具体信息。之前其实参考了网上的一篇文章,但觉得有点儿过于复杂。。而发现:神奇的 bootstrap就自带了这个功能。所以就用bootstrap的popover插件做了,效果还不错。虽然挺简单的,但还是纪念一下……

定义一个超链接,同时需注意相应页面的必要的css和js必须引入:

Html代码

<link href="css/bootstrap.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<a href="#" class="bind_hover_card" data-toggle="popover" data-placement="bottom" data-trigger="hover"><img class="commentAvatarImage" src="img/social_dribbble.png" /></a>  

data-toggle="popover"属性则为该超链接绑定弹窗效果,data-placement="bottom"指定弹窗相对于超链接显示的位置,data-trigger="hover"则是关键,指定悬浮时触发弹窗显示。。

关于bootstrap之popover插件的一些常见属性如下:

选项名称 类型/默认值 Data 属性名称 描述

animation boolean
默认值:true
data-animation 向弹出框应用 CSS 褪色过渡效果。
html boolean
默认值:false
data-html 向弹出框插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。
placement string|function
默认值:top
data-placement 规定如何定位弹出框(即 top|bottom|left|right|auto)。
当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 "auto left",弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
selector string
默认值:false
data-selector 如果提供了一个选择器,弹出框对象将被委派到指定的目标。
title string | function
默认值:''
data-title 如果未指定 title 属性,则 title 选项是默认的 title 值。
trigger string
默认值:'hover focus'
data-trigger 定义如何触发弹出框: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。
delay number | object
默认值:0
data-delay 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
delay:{ show:500, hide:100}
container string | false
默认值:false
data-container 向指定元素追加弹出框。
实例: container: 'body'

常见方法:

方法描述实例Options: .popover(options)向元素集合附加弹出框句柄。

$().popover(options)
Toggle: .popover('toggle')切换显示/隐藏元素的弹出框。
$('#element').popover('toggle')
Show: .popover('show')显示元素的弹出框。
$('#element').popover('show')
Hide: .popover('hide')隐藏元素的弹出框。
$('#element').popover('hide')
Destroy: .popover('destroy')隐藏并销毁元素的弹出框。
$('#element').popover('destroy')

好了,下面重点是Js部分。

$(function() { 
  $("[data-toggle='popover']").popover({ 
    html : true,  
    title: title(),  
    delay:{show:500, hide:1000}, 
    content: function() { 
     return content();  
    }  
  }); 
}); 

 而我们来模拟下动态加载悬浮框的标题和内容:

//模拟动态加载标题(真实情况可能会跟后台进行ajax交互) 
function title() { 
  return '田喜碧Hebe(节制的人生)'; 
} 
 
//模拟动态加载内容(真实情况可能会跟后台进行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('关注成功'); 
} 

查看效果:

以上所述是小编给大家介绍的使用BootStrap实现悬浮窗口的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对TE网络网站的支持!

扫码关注TE官方微博 扫码关注TE官方微博
Oracle数据库用户的密码过期时间如何修改为永不过期 详解如何在vue中使用sass JavaScript实现动态添加Form表单元素的方法示例 JavaScript中的迭代器和生成器详解 JavaScript制作简单分页插件 mysql为字段添加和删除唯一性索引(unique) 的方法 css3实现文字扫光渐变动画效果的示例 flex actionScript读取文件示例代码 jQuery下拉框的简单应用 AJAX 自学练习 请求与显示 shell通过遍历输出两个日期范围内所有日期的方法 CSS代码 注释的3种方法 Centos 6.3安装Cassandra数据库经验分享 在linux上定期执行命令、脚本(cron,crontab,anacron) SQLSERVER数据备份文件的分割备份方法 jquery图片放大镜功能的实例代码 C#实现支持断点续传多线程下载客户端工具类 什么架构的PMS适合大中型酒店集团? 一览画面点击复选框后获取多个id值的方法 jquery使用remove()方法删除指定class子元素 javascript小数计算出现近似值的解决办法 js精确的加减乘除实例 Vue中的v-cloak使用解读 jquery mobile页面跳转后样式丢失js失效的解决方法 pyv8学习python和javascript变量进行交互 使用firebug进行调试javascript的示例 用纯CSS3实现网页中常见的小箭头 ASP.NET中下载文件的几种实例代码 CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器 redis中使用redis-dump导出、导入、还原数据实例 JS弹出层遮罩,隐藏背景页面滚动条细节优化分析 php时间戳转换的示例 JavaScript实现带标题的图片轮播特效 Prototype Array对象 学习 封装了一个支持匿名函数的Javascript事件监听器 浅谈javascript中关于日期和时间的基础知识 浅析Redis分布式锁 jQuery中 password选择器用法实例 JS+CSS实现分类动态选择及移动功能效果代码 jQuery的中 is(' visible') 解析及用法(必看) JavaScript函数节流的两种写法 Yii快速入门经典教程 jquery实现右键菜单插件 Select下拉框模糊查询功能实现代码 Jquery在IE7下无法使用 $.ajax解决方法 python自动裁剪图像代码分享 checkbox使用示例 JavaScript将数字转换成大写中文的方法 使用http_load来给Linux系统的服务器做压力测试 sql集合运算符使用方法 利用iOS手势与scrollView代理实现图片的放大缩小 python调用摄像头显示图像的实例 nodejs使用express创建一个简单web应用 Jquery实现跨域异步上传文件总结 Javascript 是你的高阶函数(高级应用) js实现水平滚动菜单导航 PHP生成自适应大小的缩略图类及使用方法分享 深入理解JavaScript系列(43):设计模式之状态模式详解 sliderToggle在写jquery的计时器setTimeouter中不生效 .NET Framework中定时器timer的单线程与多线程使用讲解 利用Python如何生成便签图片详解 没有苹果官方支持 是否可以重置MAC系统固件密码 苹果系统声音怎么微调?MAC系统声音微调的方法 JavaScript获取onclick、onchange等事件值的代码 ASP.NET下备份与还原数据库代码 详解Linux系统如何防止TCP洪水攻击 Access使用查询 在查询中执行计算的注意事项 jsp中如何实现按下回车键自动提交表单 css 解决浏览器兼容问题 利用php递归实现无限分类 格式化数组的详解 maven自动部署到远程tomcat服务器的方法 jQuery通过点击行来删除HTML表格行的实现示例 JavaScript的原型继承详解 Jquery遍历checkbox获取选中项value值的方法 iis 服务器应用程序不可用的解决方法 SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的 jquery地址栏链接与a标签链接匹配之特效代码总结 JavaScript中关于class的调用方法 JavaScript中把数字转换为字符串的程序代码 在Node.js应用中使用Redis的方法简介 浅谈JavaScript中的Math.atan()方法的使用 Python 流程控制实例代码 tensorflow构建BP神经网络的方法 Yii2 GridView实现列表页直接修改数据的方法 Mongodb启动命令参数中文说明 AppBaseJs 类库 网上常用的javascript函数及其他js类库写的 js过滤HTML标签以及空格的思路及代码 CSS基于单张背景图实现自适应宽度的圆角菜单效果代码 JavaScript实现动态删除列表框值的方法 在IIS上重新注册.NET Framework 2.0的命令和参数详解 利用Python实现网络测试的脚本分享 js解析与序列化json数据(一)json.stringify()的基本用法 jQuery原理系列-css选择器的简单实现 JS实现拖动滚动条评分的效果代码分享 使用AngularJS中的SCE来防止XSS攻击的方法 Bootstrap实现带动画过渡的弹出框 建立JSP操作以提高数据库访问的效率 Python外星人入侵游戏编程完整版 微信小程序 图片等比例缩放(图片自适应屏幕) js实现HTML中Select二级联动的实例 jquery使用jquery.zclip插件复制对象的实例教程 JQuery 确定css方框模型(盒模型Box Model) js 获取后台的字段 改变 checkbox的被选中的状态 代码 Python队列的定义与使用方法示例 MySQL如何修改账号的IP限制条件详解 javascript中的绑定与解绑函数应用示例 nodeJS实现简单网页爬虫功能的实例(分享) JavaScript Base64 作为文件上传的实例代码解析 基于Echarts 3.19 制作常用的图形(非静态) JavaScript数组实现数据结构中的队列与堆栈 快速获取Ajax通信对象的方法 .NET微信扫码支付接入(模式二-NATIVE) 分享9个最好用的JavaScript开发工具和代码编辑器 CSS清除浮动float的三种方法小结 基于jsp的井字游戏实例 Javascript基础教程之switch语句 远程检测Linux服务器中内存占用情况的方法 Ruby设计模式编程中使用Builder建造者模式的实例 JavaScript中的函数模式详解 Thinkphp搭建包括JS多语言的多语言项目实现方法 使用jquery实现IE下按backspace相当于返回操作 Python基于QRCode实现生成二维码的方法【下载,安装,调用等】 Android BroadcastReceiver接收收到短信的广播 Python设置Socket代理及实现远程摄像头控制的例子 springboot如何使用thymeleaf模板访问html页面 PHP使用http_build_query()构造URL字符串的方法 Swift中的限定扩展详析 Jquery模仿Baidu、Google搜索时自动补充搜索结果提示 vue数组对象排序的实现代码 下拉框select样式改写具体实现 Python 错误和异常代码详解 在ASP.NET 2.0中操作数据之七十:配置数据库连接和命令等级设置 译文:如何写出漂亮的HTML代码 jquery ui dialog替代confirm实例分析 PHP 中关于ord($str)>0x80的详细说明 jQuery使用手册之二 DOM操作 浅析IOS开发TouchID指纹解锁功能 jquery+ajax实现注册实时验证实例详解 MAC系统Mail中的邮件如何用颜色标记以区分邮件的重要性 jQuery之动画ajax事件(实例讲解) asp.net检查服务器上目录或文件是否存在的方法 分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载) JavaScript实现瀑布流以及加载效果 ASp.net下fckeditor配置图片上传最简单的方法 Android ListView实现下拉加载功能 基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换) 详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】 利用Vue v-model实现一个自定义的表单组件 CKEditor自定义按钮插入服务端图片 网页前端常见的攻击方式和预防攻击的方法 基于JavaScript中字符串的match与replace方法(详解) 让jQuery与其他JavaScript库并存避免冲突的方法 Python实现基本数据结构中栈的操作示例 js中getter和setter用法实例分析 PHP把MSSQL数据导入到MYSQL的方法 jQuery查找节点方法完整实例 PHP魔术方法以及关于独立实例与相连实例的全面讲解 通过margin 0px auto来实现一列固定宽度居中 php+ajax 实现输入读取数据库显示匹配信息 Python+Socket实现基于UDP协议的局域网广播功能示例 WPF图形解锁控件ScreenUnLock使用详解 vue.js源代码core scedule.js学习笔记 Jquery 1.9.1源码分析系列(十二)之筛选操作 jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动 PHP的Laravel框架结合MySQL与Redis数据库的使用部署 在Vue 中使用Typescript的示例代码 解决tomcat在Debug模式下无法启动问题 ASP.NET MVC下Bundle的使用方法 PHP和MySql中32位和64位的整形范围是多少 Flex正则表达式判断中文或全角字符代码 Java编程实现对十六进制字符串异或运算代码示例 关于meta viewport中target-densitydpi属性详解(推荐) vue 2.0路由之路由嵌套示例详解 JavaScript中奇葩的假值示例应用 BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种) ASP.NET抓取网页内容的实现方法 纯CSS实现鼠标悬停显示图片效果的实例分享 Tensorflow 查看变量的值方法 div图片marquee无缝连接实现代码 ASP.NET MVC3模板页的使用(2) jQuery中prev()方法用法实例 如何编写高质量JS代码 详解Java数字签名提供XML安全 jQuery表单插件ajaxForm实例详解 连接Python程序与MySQL的教程 安装ubuntu12.04后无线网卡驱动安装方法分享 jquery.pagination.js 无刷新分页实现步骤分享 Linux RedHat下安装Python2.7开发环境 JavaScript弹出新窗口并控制窗口移动到指定位置的方法 HTML5 JS压缩图片并获取图片BASE64编码上传 正则表达式的基本知识 CI框架中zip类应用示例 Could not load file or assembly 'App_Licenses.dll'的问题 关于include标签导致js路径找不到的问题分析及解决 iOS自定义UITabBar仿今日头条效果 JS实现json的序列化和反序列化功能示例 ie9崩溃现象当js设置tr元素样式为display none python基础教程之常用运算符 Linux下自动清理大量文件的方案探究 CentOS 6.4创建Mongodb副本集
jQuery招聘网站选择地区行业职位.zip 紫色个人技能介绍模板.zip jQuery超酷平面式时钟效果.zip 埃及金字塔旅游公司模板.zip 【T446】高端HTML5婚纱摄影婚庆婚礼策划公司网站织梦模板(自适应).zip 2012圣诞节红色主题模板.zip jquery带过滤功能列表插件.zip jQuery UI iOS6移动主题.zip android电话拨打与发送短信实例demo jQuery带进度条全屏图片轮播代码.zip jquery文字输入特效.zip 海上的沤鸟HTML网页模板.zip html5+css3文字翻转动画效果.zip 【PHP源码】Phpwind会员电子邮件地址导出程序_phpwind_email.zip jQuery HTML5 SVG进度条特效.zip jquery雪花飘落效果.zip css3文字阴影导航.zip 电影胶卷风格js幻灯片.zip jQuery带箭头图片层叠轮播切换代码.zip css3实现多款创意按钮.zip 红色个性博客CSS网页模板.zip JS+CSS3实现苹果iwatch计时器.zip jQuery带时钟网站幻灯片代码.zip css3蓝色修边导航.zip ssm+shiro+redis+ecache整合认证权限 Struts+hibernate+Spring小项目 【ASP.NET源码】青岛房产网 2008 (C#.net+Sql server)_qdhouse.zip 仿安卓游戏极游网手机wap游戏网站模板.zip 微信小程序 - 天气列表锚点.zip jquery tab招聘列表选项卡切换.zip 运动鞋销售网站模板.zip js图片相册弹出预览特效.zip jQuery老虎机抽奖代码.zip java实现的聊天室 游戏机企业网站模板.zip 简洁蓝色风格HTML5网页模板.zip jQuery+CSS3堆叠式面板切换特效.zip 掌上校园 微信小程序 - 云商城(带php后端).zip jQuery环形图标菜单旋转切换特效.zip HTML5 SVG跨设备jQuery图表插件.zip 微信小程序源码-阴阳师小程序-式神猎手(含后端及api解决方案) CSS3实现动态购物车图标.zip 实用的jquery固定位置特效.zip 工业建筑响应式HTML5模板.zip jquery平滑弹出幻灯片.zip 【ASP.NET源码】北秋社区asp.net v1.0 正式版_beiqiu.zip 电商网站jQuery弹出提示层代码.zip LayerSlider带动画效果幻灯片.zip HTML5 SVG实现超酷打击乐器特效.zip JS仿支付宝文本输入框放大.zip jQuery表单浮动标签设计效果代码.zip Discuz! x2城市空间模板.zip 大气商务办公企业网站模板.zip 微信小程序源码-优雅搜索框展示 蓝色高光背景企业模板.zip jquery鼠标悬停随机显示字符特效.zip 【PHP源码】DiY-Page自定制门户系统 v4.0.0正式版 简体中文版GBK_diy-page_v4_0_0_sc_gb2312.zip 手机程序设计师网页模板.zip 网上商店CSS网页模板.zip jQuery+css3水平悬停动画.zip EasyJF官网全站源码 ssm demo(通过redis解决session共享的问题) 冲浪运动sports网站模板.zip 黑色复古培训网站模板.zip jQuery框架的PrettyPhoto图片特效.zip JSPGen内容管理系统 GitHub for Windows离线安装包 Flash简易相册代码.zip 简洁风琴标签导航代码.zip 帝国CMS绿色食品企业模版.zip jquery图片轮播插件PgwSlider.zip 仿12306 Spring4.3+SpringMVC4.3+Mybatis3+EASYUI整合 OA系统权限设计数据库实现 CSS3鼠标经过图标变色旋转特效.zip 微信小程序源码-茶叶商城 jQuery自动播放焦点广告.zip 带上下箭头jQuery视差滚动特效.zip Android官方API文档完整版中文版chm jquery滑动UI选项卡.zip spring-boot mybaits spring security redis整合 jQuery图片跟随鼠标左右摆动.zip jQuery带删除功能图片上传插件.zip Bootstrap Accordion手风琴特效.zip JS鼠标拉动文字弹簧动画效果.zip HTML5 SVG可互动的3D标签云代码.zip jquery控制css各个样式表切换.zip css3圆形修边按钮.zip spring mvc+mybatis3.1框架集成及事务,分页使用 Spring MVC+Mybatis+Ehcache+Apache Shiro+Bootstrap整合开发java仓库管理系统源码 jQuery四屏可自动播放焦点图代码.zip js图片数字时钟走动代码.zip 【PHP源码】曼特斯通用型网上商店系统_osc_70.zip jquery按关键词多选列表框选项.zip 【ASP.NET源码】X3BLOG(ASP.NET开源多用户博客系统) 1.1.0 beta1 编译版_x3blog-bin.zip jquery京东商城首页焦点图.zip 微信小程序 - 余味餐厅.zip 自助烧烤美食网站模板.zip jsp SMART系统-考试监控及阅卷模块的设计与开发 jQuery带左右按钮步骤选项卡.zip JSP+SERVLET+MYSQL 博客系统网站 纯CSS3制作蓝色滑动下拉菜单.zip jQuery仿新浪微博高度自适应滚动代码.zip HTML5仿微信朋友圈图片展示代码.zip jQuery菜单插件AutoSprites.zip 美女写真PSD模板下载.zip 机械工业类CSS网站模板.zip Java 四人斗地主源码 HTML5 SVG饼状图形进度条代码.zip 微信小程序 - 图片演示demo.zip SpringBoot整合SSM(含数据库),含有代码生成 豆瓣知乎引流经验谈:豆瓣知乎日吸引100 流量月入上万 HTML5响应式全屏宽度幻灯片特效.zip Android有意思的重力感应控件 【PHP源码】AeDating v4.0.0002_aedating4.zip 大气商务酒店网站模板.zip 蓝色城市建筑主题网站模板.zip jQuery按钮点击loading加载.zip 优酷电视剧频道jQuery焦点图.zip androidwifi搜索连接热点创建 图片布局实例.zip 【ASP.NET源码】Asp.Net许愿墙系统源码_aidaixuyuanqiang.zip 都市供求信息网-struts2架构的例程序(sqlserver数据库) 家庭影院CSS网页模板.zip 【PHP源码】一句话英语 v1.0_webenglish.zip jQuery点击图片上下滑动切换.zip 麦田收割种植企业模板.zip 仿聚优品vip3G触屏版淘宝单页手机wap购物网站模板.zip Spring Quartz定时作业 微信小程序源码-漂流瓶 js小球撞击游戏源码下载.zip 【PHP源码】牛妈妈简单PHP计数器_nmmjsq.zip 微信小程序 - 微信公众平台 Java SDK(包含微信支付).zip 旅游服务CSS网页模板.zip 类似flash效果jQuery焦点图.zip jQuery带微博按钮返回顶部效果.zip jquery鼠标悬停滑动下拉菜单代码.zip 服务器运维公司网站模板.zip 应用程序HTML5模板.zip JSP+ACCESS网上拍卖平台系统(源代码+论文) jd-gui-0.3.3.windows java 反编译工具 绿色版 jQuery简洁大气日程安排日历.zip 宏碁官网jQuery多选项卡切换.zip jquery.slides响应式焦点图.zip spring hibernate 整合例子 基于HTML5和CSS的焦点图特效.zip 仿好孩子育儿网discuz手机wap社区网站模板.zip 基于TCC机制的分布式事务管理器源代码 微官网美食订餐html5触屏响应式手机wap网站订餐模板.zip CSS3鼠标经过图片缩小显示文字特效.zip 微信小程序源码-掘金收藏集简单示例 毕业设计-Struts2+Hibernate4.2+Spring3的SSH2高校图书管理系统 电脑高手HTML灰色模板.zip jQuery带滚动条头部固定表格代码.zip 视差滚动设计公司网页模板.zip 实用的UI工具包网页模板.zip 美食食谱大全网站模板.zip 卡通儿童APP网站模板.zip PJBlog2 Maxthon II.zip Struts2+hibernate银行系统设计实现适合课程设计 绿色种植生态div+css模板.zip 【PHP源码】PHP168整站 v4.0 SP2 繁体版_php168big5.zip 三种风格web前端HTML5模板下载 jquery焦点图片轮播滚动.zip 黑色游戏评测网页模板.zip 支持多种动画特效jQuery幻灯片.zip 微信小程序源码-美容类预约报名列表 jQuery多个选项卡tab切换代码.zip 绿色APP应用官网模板.zip 简单炫彩CSS网页模板.zip 【ASP.NET源码】梦想家园留言板2008(ASP.NET2.0)_dreamhomeguestbook.zip jQuery电网分分步骤注册表单代码.zip 微信小程序 - 校内新闻大图.zip phpwind9.0合肥论坛.zip 【ASP.NET源码】Ajax Control Tookit的Modal Popup Extender弹出应用_popupdemo.zip jQuery网站通栏广告代码.zip 图片相册gallery响应式模板.zip 【PHP源码】Joomla v1.0.15_joomla.zip ArrayList关键字查询 【PHP源码】奇特工作室源码(flash)_qtgzs.zip Discuz! x2.5秋意时尚模板.zip js+css3制作响应式导航菜单代码.zip jQuery下拉列表插件jQselectable.zip 扁平公司官网HTML5模板.zip 仿微信朋友圈图片浏览 jQuery图片截剪预览功能插件.zip 【PHP源码】守望MySQL简单工具 v1.2_mysqlt.zip 【PHP源码】MC.IMSS v1.8.5_mcimss.zip ckplayer网页播放视频代码.zip 微信小程序源码-豆瓣电影 jQ多图形横向tab标签切换.zip 2014淘宝首页html模板.zip 【PHP源码】Google近日收录查询精确版 v1.0_ggcx.zip CSS3圆圈悬浮旋转菜单.zip MySQL驱动jar包 js点击按钮文字随机点名器代码.zip jquery向导提示操作插件.zip Redis-Cluster-Demo 油漆博客CSS网页模板.zip
举报X