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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
javascript读取本地文件和目录方法详解
Aug 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
谈一谈收音机的高放电路
2021/03/02 无线电
利用php获取服务器时间的实现代码
2013/06/07 PHP
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python实现队列的方法
2015/05/26 Python
使用python实现tcp自动重连
2017/07/02 Python
python中import reload __import__的区别详解
2017/10/16 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python如何计算语句执行时间
2019/11/22 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
初入社会应届生求职信
2013/11/18 职场文书
配件采购员岗位职责
2013/12/03 职场文书
社会实践心得体会
2014/01/03 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
干部鉴定材料
2014/05/18 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
小学重阳节活动总结
2015/03/24 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
导游词之长城八达岭
2019/09/24 职场文书
PHP中->和=>的意思
2021/03/31 PHP