使用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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
详解React native fetch遇到的坑
Aug 30 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新手上路(十三)
2006/10/09 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python实现栈的方法
2015/05/26 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
你对IPv6了解程度
2016/02/09 面试题
总经理任命书
2014/03/29 职场文书
先进个人材料怎么写
2014/12/30 职场文书
放假通知范文
2015/04/14 职场文书