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


Posted in Javascript onDecember 13, 2016

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

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

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

刚好最近在做一些前端的东东,涉及到类似的需求。——鼠标悬停,出现一个悬浮框,悬浮框描述一些具体信息。之前其实参考了网上的一篇文章,但觉得有点儿过于复杂。。而发现:神奇的 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实现悬浮窗口的效果

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

Javascript 相关文章推荐
JS获取页面窗口大小的代码解读
Dec 01 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
微信小程序 教程之引用
Oct 18 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
vue加载完成后的回调函数方法
Sep 07 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 #Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 #Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 #Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 #Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 #Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 #Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 #Javascript
You might like
将PHP作为Shell脚本语言使用
2006/10/09 PHP
How do I change MySQL timezone?
2008/03/26 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
Python中max函数用法实例分析
2015/07/17 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python自动生成sql语句的脚本
2021/02/24 Python
几道Web/Ajax的面试题
2016/11/05 面试题
如何清空Session
2015/02/23 面试题
创业计划实施的7大步骤
2014/02/05 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
中秋寄语大全
2014/04/11 职场文书
课例研修方案
2014/05/31 职场文书
欧元符号 €
2022/02/17 杂记