由于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. 零基础学Python-第一章 :Python介绍和安装-01.Python语言的特点

    结束

  2. 基于grafana+prometheus构建Flink监控

    先上一个架构图 Flink App : 通过report 将数据发出去 Pushgateway :  Prometheus 生态中一个重要工具 Prometheus :  一套开源的系统监控报警框架 ...

  3. Java使用Jsoup获得新闻联播所有文字稿

    Jsoup的maven坐标: <!-- https://mvnrepository.com/artifact/org.jsoup/jsoup --> <dependency> ...

  4. SourceTree 免登录跳过初始设置的方法 for Windows

    SourceTree安装包下载地址: 链接: https://pan.baidu.com/s/1rOPQkfNqvLGcIeZNw0aAjw 密码: 42us nodev6.9.0 和git 链接:h ...

  5. SpringBoot学习笔记:Redis缓存

    SpringBoot学习笔记:Redis缓存 关于Redis Redis是一个使用ANSI C语言编写的免费开源.支持网络.可基于内存亦可以持久化的日志型.键值数据库.其支持多种存储类型,包括Stri ...

  6. 超详细的Tensorflow模型的保存和加载(理论与实战详解)

    1.Tensorflow的模型到底是什么样的? Tensorflow模型主要包含网络的设计(图)和训练好的各参数的值等.所以,Tensorflow模型有两个主要的文件: a) Meta graph: ...

  7. 为nologin用户开一个terminal

    昨天,我在设置zabbix-agent的时候,发现agent机器上的zabbix用户并不能读取某文件信息.我就想跳到zabbix用户,后来失败,发现在/etc/passwd中,zabbix被设置为 z ...

  8. Java program to find the largest element in array

    Java program to find the largest element in array Given an array of numbers, write a java program to ...

  9. Cookies和Sessions

    Cookie和Session 为什么会有cookie和session? 由于http协议是无状态的 无法记住用户是谁,cookie主要是在浏览器上记录客户的状态,session主要是用来在服务端记录客 ...

  10. nlp算法

    人工智能算法大体上来说可以分类两类:基于统计的机器学习算法(Machine Learning)和深度学习算法(Deep Learning) 总的来说,在sklearn中机器学习算法大概的分类如下: 1 ...