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获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
JS实现百度搜索框
Feb 25 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
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
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
js实现二级导航功能
2017/03/03 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
Django实现组合搜索的方法示例
2018/01/23 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
中科软测试工程师面试题
2012/06/16 面试题
如何安装ruby on rails
2014/02/09 面试题
英文自荐信
2013/12/19 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
庆七一宣传标语
2014/10/08 职场文书
师范生见习报告
2014/10/31 职场文书
公司员工管理制度
2015/08/04 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL