使用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实现选项卡的特别效果的实例
Mar 03 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
webpack入门必知必会
Jan 16 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 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图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php析构函数的简单使用说明
2015/08/24 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
document.forms用法示例介绍
2014/06/26 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
关于python写入文件自动换行的问题
2018/06/23 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python openssl模块安装及用法
2020/12/06 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
超市国庆节促销方案
2014/02/20 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
表彰大会主持词
2014/03/26 职场文书
出国留学担保书
2014/05/20 职场文书
学校宣传标语
2014/06/18 职场文书
代收款委托书范本
2014/10/01 职场文书
机关作风建设自查报告
2014/10/22 职场文书
外出考察学习心得体会
2016/01/18 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
python flask框架快速入门
2021/05/14 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers