Bootstrap的js插件之弹出框(popover)
data-toggle="popover"——使弹出框可以切换状态;
title——设置弹出框的标题;
data-content——设置弹出框的内容部分;
data-placement——设置弹出框的方位(top、left、right、bottom,默觉得right);
data-trigger="focus"——设置焦点事件使用户点击空白处即能切换状态;
很多其它细节參考演示样例:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>饭盒儿——发现身边不一样的世界</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style> </style>
</head>
<body>
<div class="container">
<h3>popover.js演示样例</h3>
<a href="#" type="button" class="btn btn-default js-popover" data-toggle="popover" title="广州恒大" data-content="唯一一支获得过亚冠冠军的中超俱乐部" data-placement="bottom" data-trigger="focus">
支持广州恒大
</a>
</div>
<script>
$(".js-popover").popover();
// $(".js-popover").popover("show");
</script> </body>
</html>
Bootstrap的js插件之弹出框(popover)的更多相关文章
- Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...
- Bootstrap历练实例:弹出框(popover)事件
事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...
- 弹出框 popover.js
弹出框 popover.js 为任意元素添加一小块浮层,就像 iPad 上一样,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 插件依赖 弹出框依赖 工具提示插件 ,因 ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
- layer.js漂亮的弹出框
它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...
- js简单的弹出框有关闭按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 前段js的各种弹出框
artDialog 首页 > 文档与示例 artDialog —— 经典的网页对话框组件,内外皆用心雕琢. 支持普通与 12 方向气泡状对话框 完善的焦点处理,自动焦点附加与回退 支持 ARIA ...
- selenium python (十一)alert/confirm/prompt的处理(js中的弹出框)
webdriver中处理js所生成的alert.confirm以及prompt,采用switch_to_alert()方法定位到alert/confirm/prompt.然后使用text/accept ...
随机推荐
- python之道03
1.有变量name = " aleX leNb " 完成如下操作: 移除 name 变量对应的值两边的空格,并输出处理结果 答案: name = " aleX leNb ...
- [题解] cogs 1669 神秘的咒语
http://cogs.pro:8080/cogs/problem/problem.php?pid=1669 "The Real Incantation is Their Common In ...
- [POJ] 3539 Elevator
http://poj.org/problem?id=3539 给定一个电梯,可以上升a,b,c层和回到1层,给定楼高h,求可达层数 lyd讲的同余类BFS,方法是先把三个量压成两个,即把h%a,因为对 ...
- 微信小程序request请求动态获取数据
微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...
- Linux项目发布流程
Linux项目发布流程(一) 1.安装pyhton3.7 的依赖包 yum -y groupinstall "Development tools" yum -y install z ...
- 【HDU 1402】A * B Problem Plus(FFT)
Problem Description Calculate A * B. Input Each line will contain two integers A and B. Process to e ...
- Cannot delete or update a parent row: a foreign key constraint fails....
在操作”小弟“这张表时候报错 想在“小弟”上面加入数据或者更新数据,就要听老大的, 这句话后面跟着的表就是“老大”,必须老大有数据索引,“小弟“才可以加入或者更新 查看“小弟”表的外键,会发现有对“老 ...
- 【Codeforces 25C】Roads in Berland
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 用floyd思想. 求出来这条新加的边影响到的点对即可. 然后尝试更新点对之间的最短路就好. 更新之后把差值从答案里面减掉. [代码] #in ...
- cf837d Round Subset
设dp[i][j][k]表示前i个数中选j个并且因子含有k个2的能获得的最多的5的个数 则dp[i][j][k]=max(dp[i-1][j][k],dp[i-1][j-1][k-cnt2]+cnt5 ...
- sql语句中嵌套2层循环
declare @year intdeclare @month intset @year=2008 while(@year<=2011)beginset @month=1while(@month ...