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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
基于mysql的论坛(6)
2006/10/09 PHP
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
Javascript模板技术
2007/04/27 Javascript
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
package.json文件配置详解
2017/06/15 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
python中日志logging模块的性能及多进程详解
2017/07/18 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
台湾专柜女包:KINAZ
2019/12/26 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
军训拉歌口号
2014/06/13 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
英文商务邀请函范文
2015/01/31 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js