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 forEach通用循环遍历方法
Oct 11 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
Javascript玩转继承(二)
May 08 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
jQuery 使用手册(五)
2009/09/23 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Python中文件遍历的两种方法
2014/06/16 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python中xrange用法分析
2015/04/15 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
使用python实现飞机大战游戏
2020/03/23 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
航空大学应届生求职信
2013/11/10 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
新学期决心书
2014/03/11 职场文书
求职意向书范本
2015/05/11 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python