使用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 相关文章推荐
html+js实现动态显示本地时间
Sep 21 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
Bootstrap响应式表格详解
May 23 Javascript
vue.js路由跳转详解
Aug 28 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP安全下载文件的方法
2016/04/07 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
非常漂亮的JS代码经典广告
2007/10/21 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
javascript常用方法总结
2015/05/14 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python实现飞机大战游戏
2020/10/26 Python
Django实现跨域的2种方法
2019/07/31 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Django封装交互接口代码
2020/07/12 Python
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
自我鉴定总结
2014/03/24 职场文书
个人委托书怎么写
2014/09/17 职场文书
见习报告怎么写
2014/10/31 职场文书
小升初自荐信范文
2015/03/05 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书