Bootstrap基本插件学习笔记之Alert警告框(20)


Posted in Javascript onDecember 08, 2016

和前面的模态对话框类似。

0x01 例子

先看一个简单的例子:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>警告框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>警告框</h1>
 </div>
 <div class="alert alert-danger fade in ">
 警告!服务器dang了
 <a href="#" class="close" data-dismiss="alert">×</a>
 </div>
</div>
</body>
</html>

效果如下:

Bootstrap基本插件学习笔记之Alert警告框(20)

0x02 事件

Alert警告框和模态对话框类似,也支持JS事件:

(1)close.bs.alert

当调用 close 实例方法时立即触发该事件:

$('#myalert').bind('close.bs.alert', function () {
 // 执行一些动作...
})

(2)closed.bs.alert

当警告框被关闭时触发该事件(将等待 CSS 过渡效果完成):

$('#myalert').bind('closed.bs.alert', function () {
 // 执行一些动作...
})

看一个例子:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>警告框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>警告框</h1>
 </div>
 <div class="alert alert-danger fade in" id="myAlert">
 警告!服务器dang了
 <a href="#" class="close" data-dismiss="alert">×</a>
 </div>
</div>
<script>
 $(function () {
 $("#myAlert").bind('closed.bs.alert',function () {
  alert("警告消息框被关闭!");
 });
 })
</script>
</body>
</html>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
js中document.write的那点事
Dec 12 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 #Javascript
浅谈Node.js:理解stream
Dec 08 #Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 #Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 #Javascript
JS生成和下载二维码的代码
Dec 07 #Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 #Javascript
You might like
广播爱好者需要了解的天线知识
2021/03/01 无线电
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
C#实现启动一个进程
2016/10/01 面试题
干部培训自我鉴定
2014/01/22 职场文书
模特大赛策划方案
2014/05/28 职场文书
励志演讲稿200字
2014/08/21 职场文书
法人委托书范本
2014/09/15 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python