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 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 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的一种模块模式
2008/03/22 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Python requests接口测试实现代码
2020/09/08 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
数控技术应届生求职信
2013/11/13 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
小学综合实践活动总结
2014/07/07 职场文书
工作自我评价范文
2019/03/21 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python