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 在各个浏览器中执行的耐性
Apr 06 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
js 函数性能比较方法
Aug 24 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 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调用数据库的存贮过程!
2006/10/09 PHP
PHP循环结构实例讲解
2014/02/10 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
js中的replace方法使用介绍
2013/10/28 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
深入理解javascript中的this
2021/02/08 Javascript
python将unicode转为str的方法
2017/06/21 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
面试后的英文感谢信
2014/02/01 职场文书
采购部经理岗位职责
2014/02/10 职场文书
汇源肾宝广告词
2014/03/20 职场文书
小组口号大全
2014/06/09 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
统计工作个人总结
2015/03/03 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
2016年情人节广告语
2016/01/28 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
Python OpenCV实现图形检测示例详解
2022/04/08 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技