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高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
动态加载jQuery的方法
Jun 16 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
JavaScript实现星级评分
Jan 12 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 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
玩转虚拟域名◎+ .
2006/10/09 PHP
php 高性能书写
2010/12/11 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
jQuery的slideToggle方法实例
2013/05/07 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
金融学专科生自我鉴定
2014/02/21 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
春节超市活动方案
2014/08/14 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android