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 Eval 函数使用
Mar 23 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
Java 生成随机字符的示例代码
Jan 13 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下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP新手入门学习方法
2011/05/08 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP的引用详解
2015/02/22 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
python matplotlib坐标轴设置的方法
2017/12/05 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
学习Python列表的基础知识汇总
2020/03/10 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
党员2014两会学习心得体会
2014/03/17 职场文书
关于运动会的口号
2014/06/07 职场文书
先进工作者事迹材料
2014/12/23 职场文书
教师个人年度总结
2015/02/11 职场文书