一.弹出框

弹出框即点击一个元素弹出一个包含标题和内容的容器。

//基本用法


<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>&times;</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 弹出框和警告框插件的更多相关文章

  1. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...

  2. 第二百四十六节,Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

  3. Bootstrap 弹出框(Popover)插件

    Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...

  4. Bootstrap弹出框(modal)垂直居中

    最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...

  5. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  6. bootstrap弹出框

    要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...

  7. bootstrap弹出模态框会给body加padding的解决方法

    bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...

  8. bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入

    如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层  打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...

  9. Asp.net点击按钮弹出文件夹选择框的实现(网页)

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...

  10. php网页,想弹出对话框, 消息框 简单代码

    php网页,想弹出对话框, 消息框 简单代码 <?php echo "<script language=\"JavaScript\">alert(\&q ...

随机推荐

  1. Android应用帧率--FPS测试

    Android应用帧率FPS是衡量应用流畅度的一个非常重要的指标,可以根据FPS对应用做一些优化,那么在开发过程中如何来测试我们的应用的FPS呢? 准备工具:Eclipse + Android测试终端 ...

  2. WebApi:路由和Action选择

      译自:http://www.asp.net/web-api/overview/web-api-routing-and-actions/routing-and-action-selection   ...

  3. Date 对象转换——toString、toTimeString、toDateString、toUTCString、toLocaleString()、toLocaleTimeString()、toLocaleDateString()

    JavaScript toString() 方法 JavaScript Date 对象参考手册 定义和用法:toString() 方法可把 Date 对象转换为字符串,并返回结果. 语法:dateOb ...

  4. 【Excel】Excel根据单元格背景色求和

    例:用公式计算单元格背景色为浅蓝色的数字之和    步骤一: Office 2003 Insert->Name->Define,Names in workbook输入getColor或ge ...

  5. XIII Open Cup named after E.V. Pankratiev. GP of America

    A. Explosions 注意到将炸弹按坐标排序后,每个炸弹直接引爆和间接引爆的都是连续的一段区间,因此只需要求出每个炸弹能间接炸到的最左和最右的炸弹即可. 建立图论模型,炸弹$i$向炸弹$j$连单 ...

  6. 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 ...

  7. 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 ...

  8. 51Nod 1136 欧拉函数 Label:数论

    对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目.此函数以其首名研究者欧拉命名,它又称为Euler's totient function.φ函数.欧拉商数等.例如:φ(8) = 4(Phi( ...

  9. Codeforces Round #199 (Div. 2) E. Xenia and Tree

    题目链接 2了,差点就A了...这题真心不难,开始想的就是暴力spfa就可以,直接来了一次询问,就来一次的那种,TLE了,想了想,存到栈里会更快,交又TLE了..无奈C又被cha了,我忙着看C去了.. ...

  10. 移动端页面0.5px border的实现

    移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框 代码如下: <!doctype html> <html lang="en"& ...