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 相关文章推荐
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
Bootstrap表单布局
Jul 19 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
Vue实现穿梭框效果
Sep 30 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/02/27 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
gulp解决跨域的配置文件问题
2017/06/08 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
python生成随机图形验证码详解
2017/11/08 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
python基于opencv 实现图像时钟
2021/01/04 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
银行业务授权委托书
2014/10/10 职场文书
博士论文答辩开场白
2015/06/01 职场文书
升学宴祝酒词
2015/08/11 职场文书
多表查询、事务、DCL
2021/04/05 MySQL