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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
JS实现商品橱窗特效
Jan 09 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
php 变量未定义等错误的解决方法
2011/01/12 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
php-fpm中max_children的配置
2019/03/15 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
回调函数的意义以及python实现实例
2017/06/20 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
python与js主要区别点总结
2020/09/13 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
入股合作协议书
2014/10/12 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
详解jQuery的核心函数和事件处理
2022/02/18 jQuery