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 相关文章推荐
chrome下img加载对height()的影响示例探讨
May 26 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
关于vue面试题汇总
Mar 20 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
js如何验证密码强度
Mar 18 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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系统流量分析的程序
2006/10/09 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
js继承实现方法详解
2016/12/16 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
对pandas处理json数据的方法详解
2019/02/08 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Python中itertools的用法详解
2020/02/07 Python
Django中的session用法详解
2020/03/09 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
环保建议书400字
2014/05/14 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
工作年限证明模板
2014/11/01 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
夫妻吵架保证书
2015/05/08 职场文书
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL