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 相关文章推荐
新手常遇到的一些jquery问题整理
Aug 16 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
jQuery功能函数详解
Feb 01 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
浅析vue-router原理
Oct 19 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
坏狼的PHP学习教程之第2天
2008/06/15 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php生成gif动画的方法
2015/11/05 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
如何理解python中数字列表
2020/05/29 Python
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
在职证明书模板
2015/06/15 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python