Bootstrap 弹出框和警告框插件
一.弹出框
弹出框即点击一个元素弹出一个包含标题和内容的容器。
//基本用法
<button class="btn btn-lg btn-danger"
type="button"
data-toggle="popover"
title="弹出框"
data-content="这是一个弹出框插件"> 点击弹出/隐藏弹出框
</button>
<script type="text/javascript">
$('button').popover();
</script>
效果图如下:
弹出框插件有很多属性来配置提示的显示,具体如下:
$('button').popover({ container : 'body', viewport : { selector : '#view', padding : 10, } });
通过 JavaScript 执行的方法有四个。
//显示
$('button').popover('show');
<div id="view">
<button id= "b" class="btn btn-lg btn-danger"
type="button"
data-toggle="popover"
title="弹出框"
data-content="这是一个弹出框插件"
data-trigger="popover"> 点击弹出/隐藏弹出框
</button>
</div>
<button id="btn">按钮</button>
<script type="text/javascript">
$('#b').popover({
viewport:{
selector:'#view',
padding:10,
}
}); $('#btn').on('click',function(){
$('#b').popover('show');
}); </script>
效果图如下:
点击按钮弹出右边内容
//隐藏
$('button').popover('hide');
//反转显示和隐藏
$('button').popover('toggle');
//隐藏并销毁
$('button').popover('destroy');
Popover 插件中事件有两种。
//事件,其他雷同
$('button').on('show.bs.tab', function () { alert('调用 show 方法时触发!'); });
二.警告框
警告框即为点击小时的信息框。
//基本实例
<div class="alert alert-warning">
<button class="close" type="button" data-dismiss="alert"> <span>×</span> </button>
<p>警告:您的浏览器不支持!</p>
</div>
//添加淡入淡出效果
<div class="alert alert-warning fade in">
如果用 JavaScript,可以代替 data-dismiss="alert"
//JavaScript 方法
$('.close').on('click', function () { $('#alert').alert('close'); })
Alert 插件中事件有四种。
//事件,其他雷同
$('#alert').on('close.bs.alert', function () { alert('当 close 方法被触发时调用!'); });
Bootstrap 弹出框和警告框插件的更多相关文章
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- 第二百四十六节,Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
- Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...
- Bootstrap弹出框(modal)垂直居中
最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
- bootstrap弹出框
要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...
- bootstrap弹出模态框会给body加padding的解决方法
bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...
- bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入
如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层 打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...
- Asp.net点击按钮弹出文件夹选择框的实现(网页)
本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...
- php网页,想弹出对话框, 消息框 简单代码
php网页,想弹出对话框, 消息框 简单代码 <?php echo "<script language=\"JavaScript\">alert(\&q ...
随机推荐
- Android应用帧率--FPS测试
Android应用帧率FPS是衡量应用流畅度的一个非常重要的指标,可以根据FPS对应用做一些优化,那么在开发过程中如何来测试我们的应用的FPS呢? 准备工具:Eclipse + Android测试终端 ...
- WebApi:路由和Action选择
译自:http://www.asp.net/web-api/overview/web-api-routing-and-actions/routing-and-action-selection ...
- Date 对象转换——toString、toTimeString、toDateString、toUTCString、toLocaleString()、toLocaleTimeString()、toLocaleDateString()
JavaScript toString() 方法 JavaScript Date 对象参考手册 定义和用法:toString() 方法可把 Date 对象转换为字符串,并返回结果. 语法:dateOb ...
- 【Excel】Excel根据单元格背景色求和
例:用公式计算单元格背景色为浅蓝色的数字之和 步骤一: Office 2003 Insert->Name->Define,Names in workbook输入getColor或ge ...
- XIII Open Cup named after E.V. Pankratiev. GP of America
A. Explosions 注意到将炸弹按坐标排序后,每个炸弹直接引爆和间接引爆的都是连续的一段区间,因此只需要求出每个炸弹能间接炸到的最左和最右的炸弹即可. 建立图论模型,炸弹$i$向炸弹$j$连单 ...
- BZOJ4451 : [Cerc2015]Frightful Formula
$(i,1)$对答案的贡献为$l_iC(2n-i-2,n-i)a^{n-1}b^{n-i}$. $(1,i)$对答案的贡献为$t_iC(2n-i-2,n-i)*a^{n-i}b^{n-1}$. $(i ...
- Leetcode Remove Nth Node From End of List
Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...
- 51Nod 1136 欧拉函数 Label:数论
对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目.此函数以其首名研究者欧拉命名,它又称为Euler's totient function.φ函数.欧拉商数等.例如:φ(8) = 4(Phi( ...
- Codeforces Round #199 (Div. 2) E. Xenia and Tree
题目链接 2了,差点就A了...这题真心不难,开始想的就是暴力spfa就可以,直接来了一次询问,就来一次的那种,TLE了,想了想,存到栈里会更快,交又TLE了..无奈C又被cha了,我忙着看C去了.. ...
- 移动端页面0.5px border的实现
移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框 代码如下: <!doctype html> <html lang="en"& ...