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 autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
js密码强度实时检测代码
Mar 02 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
JS随机数产生代码分享
Feb 24 Javascript
vue文件树组件使用详解
Mar 29 Javascript
js加减乘除精确运算方法实例代码
Jan 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
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
下载官网python并安装的步骤详解
2019/10/12 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python入门之基础语法学习笔记
2020/02/08 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
农场厂长岗位职责
2013/12/28 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
增员口号大全
2014/06/18 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
授权委托书样本
2014/09/25 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
外出培训学习心得体会
2016/01/18 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书