由于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 模态窗口 多重/多个弹窗滚动条补丁的更多相关文章

  1. Bootstrap 模态窗口源码分析

    前言: bootstrap的 js插件的源码写的非常好,也算是编写jquery插件的模范写法,本来还想大篇详细的分析一下呢,唉,没时间啊,很早之前看过的源码了,现在贴在了博客上, 300来行的代码,其 ...

  2. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  3. 基于bootstrap模态框的alert弹窗

    完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...

  4. 使用jQuery和Bootstrap实现多层、自适应模态窗口

    本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...

  5. 多个按钮触发同一个Bootstrap自适应模态窗口

    在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...

  6. Remodal – 支持 Hash 追踪的响应式模态窗口

    Remodal 是一个扁平化,响应式,轻量而且容易定制的模态窗口插件,支持使用声明状态和 Hash 跟踪.您可以轻松地定义为模态弹窗定义背景景容器(如模糊效果).支持所有现代的浏览器. 您可能感兴趣的 ...

  7. 15款最好的 jQuery Modal(模态窗口)插件

    jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...

  8. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  9. 第二百四十三节,Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...

随机推荐

  1. 软件定义网络基础---SDN的主流构架

    一:基于不同标准的主流构架 二: ONF定义的SDN基本构架 (一) 四个平面.两大接口 三:四个平面 (一)数据平面 数据平面是由若干网元(Netword Element)构成,每个网元包括一个或多 ...

  2. Go并发编程实战 第2版 PDF (中文版带书签)

    Go并发编程实战 第2版 目录 第1章 初识Go语言 1 1.1 语言特性 1 1.2 安装和设置 2 1.3 工程结构 3 1.3.1 工作区 3 1.3.2 GOPATH 4 1.3.3 源码文件 ...

  3. 深入理解ElasticSearch(PDF版 内含目录)

    深入理解ElasticSearch 介绍: 本书涵盖了Elasticsearch的许多中高级功能,并介绍了缓存.ApacheLucene库以及监控等模块的内部运作机制.其中,还涉及一些实用案例,比如配 ...

  4. Django中的QuerySet查询优化之实例篇

    转载的,做个笔记,原文链接 在数据库有外键的时候,使用 select_related() 和 prefetch_related() 可以很好的减少数据库请求的次数,从而提高性能.本文通过一个简单的例子 ...

  5. 【源码解析】Flink 是如何基于事件时间生成Timestamp和Watermark

    生成Timestamp和Watermark 的三个重载方法介绍可参见上一篇博客: Flink assignAscendingTimestamps 生成水印的三个重载方法 之前想研究下Flink是怎么处 ...

  6. SegNet

    Paper link:https://arxiv.org/pdf/1511.00561.pdf Motivation:为了实际应用,主要是在时间效率和存储空间上做了改进: Introduction: ...

  7. git 操作说明

    第一步:代码提交到本地仓库 第二步:更新远程服务器代码到本地,如果有冲突需要优先解决,解决冲突后执行第一步操作 第三步:推送本地代码到远程服务器,可以使用source Tree 或者工具自带的配置gi ...

  8. AWS 消息服务(九)

    松耦合架构 概述 使用独立的组件设计架构,降低相互依赖,当一个组件出现故障时,其他不受影响 利用ELB和SQS来打破传统服务器各层的关联,成为各层之间的中介,各层的故障和扩展均由中介自助处理 系统的耦 ...

  9. Django_图片的上传下载显示配置

    图片上传的配置 image = models.ImageField(upload_to='org/%Y/%m',...) upload_to默认是上传到项目的'MEDIA_ROOT/org/%Y/%m ...

  10. date.toLocaleString()的替换

    Date date = new Date(); System.out.println("前:" + date.toLocaleString()); SimpleDateFormat ...