一.弹出框

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

//基本用法


<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. ps让文字的颜色变成图片的颜色

    第一种: 把某张图片图层置于文字图层之上,右击图片图层-->选择"创建剪贴蒙版"即可.第二种:把某张图片图层置于文字图层之上,并选择图片图层,按住Ctrl键,点击文字图层,载 ...

  2. POJ3680 Intervals(最小费用最大流)

    选择若干条线段使权值最大,并且点覆盖次数不超过k. 建图如下:vs到0建立容量为k费用为0的边:坐标终点到vt连接一条容量为k费用为0的边:对于每两个相邻坐标连接一条容量为INF费用为0的边:对于线段 ...

  3. Intellij IDEA tomcat相关

    可能遇到的问题: tomcat7启动报错  java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addFilter h ...

  4. XIII Open Cup named after E.V. Pankratiev. GP of Saratov

    A. Box Game 注意到局面总数不超过$50000$,而且每次操作都会改变石子的奇偶性,因此按奇偶可以将状态建成二分图,然后求出最大匹配. 如果状态数是偶数,那么先手必胜,策略就是每次走匹配边, ...

  5. javascript的基本语法、数据结构

    本篇学习资料主要讲解javascript的基本语法.数据结构      无论是传统的编程语言,还是脚本语言,都具有数据类型.常量和变量.运算符.表达式.注释语句.流程控制语句等基本元素构成,这些基本元 ...

  6. jq对象转为dom对象:$(".div1")[0] dom对象转为jq对象:$(dom对象)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. IOS 蓝牙相关-app作为外设被连接的实现(3)

    再上一节说了app作为central连接peripheral的情况,这一节介绍如何使用app发布一个peripheral,给其他的central连接 还是这张图,central模式用的都是左边的类,而 ...

  8. 爬虫_Crawler4j的使用

    Crawler4j的使用 (以下内容全部为转载,供自己查阅用) 下载地址: http://code.google.com/p/crawler4j/ Crawler4j的使用 网上对于crawler4j ...

  9. VS2010 F5调试时出现:“ 尝试运行项目时出错:未捕获通过反射调用的方法引发的异常”解决

    VS2010 F5调试时出现 尝试运行项目时出错:未捕获通过反射调用的方法引发的异常 两个解决方法:1) 打开项目属性,选择调试选项卡,将“启用非托管代码调试”一项钩上.2) 打开项目属性,选择调试选 ...

  10. 李洪强漫谈iOS开发[C语言-048]-打印平方表

    打印平方表