使用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 相关文章推荐
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
vue中render函数的使用详解
Oct 12 Javascript
vue双向绑定数据限制长度的方法
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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
我的论坛源代码(八)
2006/10/09 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python 字符串与数字输出方法
2018/07/16 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
商场端午节活动方案
2014/01/29 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
师恩难忘教学反思
2014/04/27 职场文书
教师演讲稿开场白
2014/08/25 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Python绘制散乱的点构成的图的方法
2022/04/21 Python