BootStrap实现带关闭按钮功能

2024-04-10 07:08:28

说明

通过使用一个象征关闭的图标，可以让模态框和警告框消失

示例

<!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与Jquery UI 按钮样式冲突的解决办法

参考: http://getbootstrap.com/javascript/ 今天在写页面的时候, 遇到一个问题, 页面上要同时使用Jquery UI的弹出框, 又要用 bootstrap 的popover 结果, 弹框的button 就变成这个样子了. 网上查了下, 需要在JS开始的地方添加两行代码. bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton; 添加完, 刷新页面就正常了
Bootstrap复选框和单选按钮美化插件(推荐)

官网地址需要引入awesome-bootstrap-checkbox.css.font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载. checkboxs的样式 radio的样式 radio样式只要引入上面所说的文件之后,也可以自己定制样式,代码如下: .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 20
基于Bootstrap重置输入框内容按钮插件

当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可. text password email url search tel number datetime 使用方法使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo
第三章之Bootstrap 表格与按钮功能

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表格 2.按钮本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各种丰富的效果. 一．表格 Bootstrap 提供了一些丰富的表格样式供开发者使用. 1.基本格式 //实现基本的表格样式 <table class="table"> 注:
Bootstrap中点击按钮后变灰并显示加载中实例代码

Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示． 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮
Bootstrap按钮功能之查询按钮和重置按钮

Bootstrap按钮功能之查询按钮和重置按钮 1.问题背景一般情况下,查询列表有查询条件.查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据:点击重置按钮会将查询条件恢复到原始状态 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮</title> <link rel=&qu
BootStrap给table表格的每一行添加一个按钮事件

1.在列属性中加入事件 { title:'数据量序号', field:'sjid' // hidden:true },{ field: 'operate', title: '操作', width: '80px', events: operateEvents, formatter: operateFormatter } 2.写一个函数 function operateFormatter(value, row, index) { return [ '<input type="submit&qu
BootStrap中按钮点击后被禁用按钮的最佳实现方法

Bootstrap中点击后禁用按钮与js有什么区别呢要如何来实现呢,今天我们就一起来看一篇关于Bootstrap中点击后禁用按钮的最佳方法,具体的例子如下所示．为了防止在Bootstrap中点击按钮多次提交,所以希望点击按钮后禁用按钮. 具体实现方法如下: //禁用button $('button').addClass('disabled'); // Disables visually $('button').prop('disabled', true); // Disables visual
BootStrap实现带关闭按钮功能

说明通过使用一个象征关闭的图标,可以让模态框和警告框消失示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo
Bootstrap实现带暂停功能的轮播组件(推荐)

最近博主在项目中用到一款轮播组件,功能齐全,可以设置各种标题样式.动画效果.轮播时间.开始暂停等功能,在此推荐给大家,供大家参考. 一.效果展示多说无益,来看一组效果展示图,感受一下! 1.先跟大家见个面,打个招呼 2.什么?切换太慢了?好,加快速度! 3.加入其他功能 4.图片太小,看不出效果?好,那来个大图感受下! 5.如果你不想要右上角的小图标,照样可以. 6.如果你对上述滑动效果不满意,组件提供了其他几种图片切换方式淡入淡出水平滑动 7.再来一张图片定位二.组件介绍 Orbit是
Bootstrap实现前端登录页面带验证码功能完整示例

本文实例讲述了Bootstrap实现前端登录页面带验证码功能.分享给大家供大家参考,具体如下: Bootstrap有自定义的验证码样式,在前端页面可以直接使用,他的css.js在使用前要在开头引入上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <meta http-equiv="X-
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

前言:最近项目里面需要用到表格的冻结列功能,所谓"冻结列",就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能有一点bug,于是和同事讨论该如何解决,于是就有了这篇文章. 一.起因回顾最近项目里面有一个表格需求,该表格列是动态产生的,而且列的数量操作一定值以后就会出现横向滚动条,滚动的时候需要前面几列固定.也就是所谓的excel的冻结列功能.该如何实现呢?不用多说,当然是查文档,于是找到了这篇h
Ionic+AngularJS实现登录和注册带验证功能

登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li
js实现带关闭按钮始终显示在网页最底部工具条的方法

本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法.分享给大家供大家参考.具体如下: 这是一款很实用的代码,给网页加入一个始终显示在浏览器窗口底部的工具栏,可以在上面放上公告,联系人等等信息,此代码的工具条还带有关闭按钮,可以随时关闭复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml
Bootstrap模态框调用功能实现方法

近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息.其实这种弹出窗口有很多jquery插件都可以实现,我这边前端都是用Bootstrap的,正好Bootstrap有模态框这个功能,这下就可以直接拿它实现了. 实现步骤如下: 在前端页面引入bootstrap相关的css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.mi
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

本文实例讲述了JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码.分享给大家供大家参考.具体如下: 这是一款阿里妈妈网站顶部banner代码,采用滑出的方式,一个经典的工具条代码,可以当作菜单来用,同时还有完善的功能,可以适时关闭工具条,整体效果设计美观,简洁漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-float-banner-alimama-style-codes/ 具体代码如下: <!DOCTYPE ht
yii2带搜索功能的下拉框实例详解

简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有.都说到这个点上了,我们赶紧使用composer进行安装吧. 先给大家展示下效果图: 下面给大家说下具体实现思路: composer require kartik-v/yii2-widget-select2 "@dev" #特别说明,因为这里安装的dev版本,也就是开发版本,不稳定版本,如果

BootStrap实现带关闭按钮功能

相关推荐

随机推荐