bootstrap 模态窗口 多重/多个弹窗滚动条补丁
由于bootstrap的模态窗口默认不支持多次弹出, 在关闭的时候会有滚动条消失的问题. 经过观察和查看源码, 发现在开启和关闭的时候会在body上增加/减少一个"modal-open"的class,所以只要在关闭的时候判断一下是否还有没关闭的窗口, 如果还有未关闭的, 则重新给body加上"modal-open"即可.
以下是代码:
//bootstrap 多重modal弹窗滚动条补丁.
$('body').on('hide.bs.modal', 'div.modal[role]', function (e) {
var len = $('div.modal[role]').length;
if (len > 1) {
setTimeout(function () {
$("body").addClass("modal-open");
}, 500);
}
});
这里处理的有点麻烦, 做了个延迟500ms, 是由于"hide.bs.modal"的触发时机过早, 模态窗体自带的"hidden.bs.modal"无法像上面代码那样触发,(麻烦哪位路过的大神给指个路.). 在事件触发之后才执行了removeClass("modal-open") . 关于这个, 大家可以去看下bootstrap.js里面的源码.搜索 "modal-open"即可找到相关代码.
如果您觉得这篇博客对您产生了一些必要的帮助, 欢迎您对我意思意思, 我将会觉得您非常够意思!

bootstrap 模态窗口 多重/多个弹窗滚动条补丁的更多相关文章
- Bootstrap 模态窗口源码分析
前言: bootstrap的 js插件的源码写的非常好,也算是编写jquery插件的模范写法,本来还想大篇详细的分析一下呢,唉,没时间啊,很早之前看过的源码了,现在贴在了博客上, 300来行的代码,其 ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- 基于bootstrap模态框的alert弹窗
完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...
- 多个按钮触发同一个Bootstrap自适应模态窗口
在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...
- Remodal – 支持 Hash 追踪的响应式模态窗口
Remodal 是一个扁平化,响应式,轻量而且容易定制的模态窗口插件,支持使用声明状态和 Hash 跟踪.您可以轻松地定义为模态弹窗定义背景景容器(如模糊效果).支持所有现代的浏览器. 您可能感兴趣的 ...
- 15款最好的 jQuery Modal(模态窗口)插件
jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...
- Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- 第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
随机推荐
- 004-行为型-05-职责链模式(Chain of Responsibility)
一.概述 为请求创建一个接收此次请求对象的链 该模式构造一系列分别担当不同的职责的类的对象来共同完成一个任务,这些类的对象之间像链条一样紧密相连,所以被称作职责链模式. 在这种模式中,通常每个接收者都 ...
- [错误处理]no matches found: connexion[swagger-ui] ?
问题原因: [ ] 中括号会影响shell脚本的执行 安装的时候在包名扩上双引号"" pip install "connexion[swagger-ui]" w ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- 【超分辨率】—(ESRGAN)增强型超分辨率生成对抗网络-解读与实现
一.文献解读 我们知道GAN 在图像修复时更容易得到符合视觉上效果更好的图像,今天要介绍的这篇文章——ESRGAN: Enhanced Super-Resolution Generative Adve ...
- vuex中mutations数据响应
vuex中的mutation需遵守Vue的响应规则: 既然Vuex的store中的状态是响应式的,那么在我们变更状态时,监视状态的Vuex最好在state中初始化好所有的所需属性. 如果需要在对象上添 ...
- EMQ配置通过nginx反向代理wss和ws
参考:https://www.cnblogs.com/succour/p/6305574.html EMQ官方文档:https://docs.emqx.io/broker/v3/cn/ 一,系统环境及 ...
- php 常用的常量
/* php 常用的常量 */ 1.系统常量 * FILE 当前PHP文件的相对路径 * LINE 当前PHP文件中所在的行号 * FUNCTION 当前函数名,只对函数内调用起作用 * CLASS ...
- golang中sync.RWMutex和sync.Mutex区别
golang中sync包实现了两种锁Mutex (互斥锁)和RWMutex(读写锁),其中RWMutex是基于Mutex实现的,只读锁的实现使用类似引用计数器的功能. type Mutex f ...
- CF1239A Ivan the Fool and the Probability Theory
思路: 可以转化为“strip”(http://tech-queries.blogspot.com/2011/07/fit-12-dominos-in-2n-strip.html)问题.参考了http ...
- Mysql sqlyog 错误1045
首先打开运行窗口输入cmd进入DOS界面或者打开MySQL Workbench Step1: cd C:\Program Files\MySQL\MySQL Server 5.6\bin Step2: ...