bootstrap警告框示例代码分享


Posted in Javascript onMay 17, 2017

本文实例为大家分享了bootstrap警告框的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 

<html lang="zh-CN"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 <title>XXX</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" > 
 <link rel="stylesheet" href="css/main.css" rel="external nofollow" > 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
 
<div class="alert alert-danger fade in"><!--淡入淡出--> 
 <button type="button" class="close" data-dismiss="alert"> 
  <span>×</span> 
 </button> 
 <p> 
  警告:你的浏览器不支持 
 </p> 
</div> 
<br> 
<br> 
<br> 
<!--用jQuery代替data-dismiss="alert"--> 
<div class="alert alert-danger fade in" id="alert"><!--淡入淡出--> 
 <button type="button" class="close"> 
  <span>×</span> 
 </button> 
 <p> 
  警告:你的浏览器不支持 
 </p> 
</div> 
 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
<script> 
 $('.close').on('click', function () { 
  $('#alert').alert('close'); 
 }) 
 
 
 //事件,其他雷同 
 $('#alert').on('close.bs.alert', function () { 
  alert('当 close 方法被触发时调用!'); 
 }); 
</script> 
</body> 
 
</html>

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

Javascript 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
28个JS验证函数收集
Mar 02 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 #Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 #Javascript
原生JS实现层叠轮播图
May 17 #Javascript
JavaScript手风琴页面制作
May 17 #Javascript
jQuery查找dom的几种方法效率详解
May 17 #jQuery
bootstrap的工具提示实例代码
May 17 #Javascript
js字符串与Unicode编码互相转换
May 17 #Javascript
You might like
PHP速成大法
2015/01/30 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
python中sleep函数用法实例分析
2015/04/29 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python判断两个对象相等的原理
2017/12/12 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
毕业证丢失证明
2014/01/15 职场文书
党员学习十八大感想
2014/01/17 职场文书
小学运动会宣传稿
2015/07/23 职场文书
运动会跳远广播稿
2015/08/19 职场文书
销售会议开幕词
2016/03/04 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
SpringBoot集成Redis的思路详解
2021/10/16 Redis
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫