BootStrap实现带关闭按钮功能


Posted in Javascript onFebruary 15, 2017

说明

通过使用一个象征关闭的图标,可以让模态框和警告框消失

示例

<!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">
   <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
   <title>Bootstrap 101 Template</title>
   <!-- Bootstrap -->
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->
  </head>
  <body>
  <div class="container">
  <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
   </div>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

输出

BootStrap实现带关闭按钮功能

以上所述是小编给大家介绍的BootStrap实现带关闭按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript iframe编程相关代码
Dec 28 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 #Javascript
Bootstrap模态框使用详解
Feb 15 #Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 #Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 #Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 #Javascript
Bootstrap table简单使用总结
Feb 15 #Javascript
原生js轮播(仿慕课网)
Feb 15 #Javascript
You might like
php接口和抽象类使用示例详解
2014/03/02 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
Pytorch中.new()的作用详解
2020/02/18 Python
使用python求解二次规划的问题
2020/02/29 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
大专自我鉴定范文
2013/10/23 职场文书
《火烧云》教学反思
2014/04/12 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL