由于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. 使用SoapUI发送Post请求

    https://www.cnblogs.com/xiaowangzi1110/p/8544264.html 使用SoapUI发送Post请求 SoapUI作为一个开源的工具,其具备强大的功能.易用的界 ...

  2. 泡泡一分钟:Visual Odometry Using a Homography Formulation with Decoupled Rotation and Translation Estimation Using Minimal Solutions

    张宁 Visual Odometry Using a Homography Formulation with Decoupled Rotation and Translation Estimation ...

  3. 算法习题---5.12城市正视图<离散化应用>(Uva221)*****

    一:题目 给定n坐房子的西南角坐标x, y.还有宽度w,长度d(其实没用),高度h.问从南面看过去能看到几座房子. 城市俯视图和主视图 注意: 输出主视图中能够看到的所有建筑物按照左下角x坐标从小到大 ...

  4. source insight 使用配置(私人)

    1.输入两个空格,两个空格全消失,前后的字粘在一起显示,不想这样,就取消下图的勾.

  5. QML随机颜色

    color=Qt.rgba(Math.random(),Math.random(),Math.random(),1)

  6. ABAP DEMO 下拉框

    效果展示: *&---------------------------------------------------------------------* *& Report YCX ...

  7. springboot 项目基本目录包结构

    1.基本目录结构 controller service impl mapper utils domain config interceoter(拦截器) dto

  8. LeetCode_206. Reverse Linked List

    206. Reverse Linked List Easy Reverse a singly linked list. Example: Input: 1->2->3->4-> ...

  9. Nginx配置自定义的403页面

    1.开启nginx的状态码,虚拟主机配置中加入下边一段 location /nginx_status{ stub_status on; access_log off; } 或着在nginx的http模 ...

  10. 【Leetcode_easy】953. Verifying an Alien Dictionary

    problem 953. Verifying an Alien Dictionary solution: class Solution { public: bool isAlienSorted(vec ...