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动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
详解javascript事件冒泡
Jan 09 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
json数据的列循环示例
2013/09/06 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python实现单词拼写检查
2015/04/25 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Python阶乘求和的代码详解
2020/02/14 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python中字符串的编码与解码详析
2020/12/03 Python
应届大学生自荐信
2013/12/05 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2016新年致辞
2015/08/01 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL