1、bootstrap多层modal关闭后无滚动问题

原文链接：bootstrap多层modal关闭后无滚动问题

bootstrap中如果在模态框弹出模态框，即多重模态框，那么在关闭模态框后，上一级的模态框无法滚动，而且滚动事件会穿透到body层。

原理是只要有modal被打开，body会被赋予modal-open这个类，使其overflow变为hidden，无法滚动；而只要有modal被关闭，body的modal-open这个类就会被remove掉。

所以解决方法如代码，非最老的一层modal监听隐藏事件，为body重新添加modal-open类。

$(".notLastModal").on("hidden.bs.modal",function(){$(document.body).addClass("modal-open");
});

2、Bootstrap页面中多个modal报“too much recursion”

原文链接：Bootstrap页面中多个modal报”too much recursion”错误的解决方案

在用Bootstrap时候发现，如果我在一个弹出的modal中再弹出一个modal的时候，js就会报错“too much recursion”，从而会影响modal中弹出的那个modal里面的一些jquery插件的使用

原因：无限递归调用
无限重复bug：当一个任务类型为同步类型，并且在任务中没有释放资源（即该任务不是最后一个任务，并且是同步任务），其下一个任务为无限重复（repeatForever）时，出现无尽递归错误（too much recursion）。

解决方案：把$.fn.modal.Constructor.prototype.enforceFocus 方法去掉就可以了。

在Bootstap.js 包含以后加上:

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

这样就不会报错了！

我用的是bootstrap.min.js，效果是一样的

其他

关于问题（Bootstrap页面中多个modal报“too much recursion”）的其他解决办法

方法一

参考解决思路
原文链接：Bootstrap同时弹出多个模态窗口Modal时的几个问题

Bootstrap中的modal组件是使用率比较高的组件之一，可modal本身对于同一个页面同时弹出多个modal的情况支持并不是很好，有些人说应该尽量避免同时弹出多个modal，应该关闭之前的modal再弹出新的modal，确实，弹出多个modal会导致页面看起来比较混乱，但不管出于什么原因，我们经常还是会碰到需要弹出多个modal的情况。

首先，碰到的第一个问题就是如果弹出多个modal，会出现相互遮盖的情况。bootstrap对modal的弹层固定了一个z-index，笔者使用的bootstrap版本为3.3.4，z-index值为1050，不同版本可能会不同。使用相同的z-index就会导致后面的弹出层无法遮住前面的弹出层的情况。这时，我们想，如果之后每个弹出层的z-index都能递增就好了，于是，笔者增加了如下代码：

$(document).on('hidden.bs.modal','.modal',function(e){$(this).css("z-index", 1050);dashboard.opts.modalLevel--;
});
$(document).on('show.bs.modal','.modal',function(e){$(this).css("z-index", 1050+dashboard.opts.modalLevel);dashboard.opts.modalLevel++;
});

在每一个modal显示前，先获取当前弹层的数量，将z-index在1050的基础上加上弹层数量，dashboard.opts.modalLevel这个就是笔者存储弹层数量的一个变量，显示和隐藏时都分别更新这个值，这样就实现了z-index的递增。

其次，弹出第一个窗口时，窗口默认是水平居中的，接着弹出第二个，会发现窗口发生了偏移，实际上是第二个窗口被设置了padding-left:15px。笔者开始以为这时作者特意设置的，这样能显出层次感，每个新弹出的窗口相对上一个进行一定偏移，但是，笔者接着弹出第三个窗口，发现padding-left还是15px，并没有增加，于是和第二个窗口重合了。

上面的测试还是在所有modal处于同一级dom节点的情况，如果是modal里面的modal，这一偏移就会导致15px的内容被遮盖了，很不幸，笔者就是这种情况。最初，笔者在新弹出的modal的shown事件上，将padding-left值进行还原，这样勉强可用，但是会出现modal突然移动的情况，对于有些强迫症的同学可能接受不了，于是笔者进一步研究了一下源码。

modal里面有一个bodyIsOverflowing属性，字面上理解是body是否溢出窗口，是在checkScrollbar方法里面计算的：

Modal.prototype.checkScrollbar = function () {var fullWindowWidth = window.innerWidthif (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8var documentElementRect = document.documentElement.getBoundingClientRect()fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)}this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidththis.scrollbarWidth = this.measureScrollbar()
}

笔者坐看右看，感觉这个值的意思好像是反了，方法里面，body的可见区域如果小于窗口的可见区域，bodyIsOverflowing值就是true，小于，不是应该没溢出吗。

adjustDialog方法对modal的padding-left和padding-right值进行了设置：

Modal.prototype.adjustDialog = function () {var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeightthis.$element.css({paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''})
}

这里可以看出来了，原来那个padding-left值15px是滚动条的宽度，padding值不是15就是0，没有其他值，跟笔者最开始想的层次结构是不相关的。第一次弹出时，笔者的document.body.clientWidth是1425，小于fullWindowWidth的1440，中间正好差个滚动条的宽度15，第二次弹出时，由于遮罩将滚动条也遮住了，document.body.clientWidth变成了1440，等于窗口的宽度，所以最后偏移了15px。笔者觉得bodyIsOverflowing是关键，body的width小于和等于window的width应该是一样的，所以笔者将代码修改成了如下：

this.bodyIsOverflowing = document.body.clientWidth <= fullWindowWidth

笔者继续查看了3.3.5的源码以及4的源码，发现计算值都还是使用的小于，可能作者确实不建议同时使用多个modal，并没有处理这种情况。

另外，如果要实现每个弹出框相对于前一个弹出框进行一定偏移，可以结合第一个问题的解决方案进行处理实现。

方法二

感觉是解决多个modal显示位置不对之类的异常
原文链接：BootStrap同时显示多个Modal解决方案

// 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面
$('.modal').on('show.bs.modal', function() {var zIndex = 1040 + (10 * $('.modal:visible').length);$(this).css('z-index', zIndex);setTimeout(function() {$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');}, 0);
});

bootstrap多层modal的相关问题相关推荐

bootstrap 模态 modal 小例子【转】
bootstrap 模态 modal 小例子 <html><head> <meta charset="utf-8" /> <title& ...
解决select2在bootstrap的modal中默认不显示的问题
解决select2在bootstrap的modal中默认不显示的问题参考文章: (1)解决select2在bootstrap的modal中默认不显示的问题 (2)https://www.cnblog ...
【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...
bootstrap多层模态框嵌套问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
bootstrap 多层弹框-关闭时导致外层滚动栏消失
问题:bootstrap form 表单内弹框, 多层模态框关闭时导致最外层滚动栏消失解决:在最外层表单中-添加 <style type="text/css">.mo ...
关于bootstrap的modal弹出层嵌套子Modal所引发的血案（转）
原文地址 http://blog.csdn.net/liuxiaogangqq/article/details/51821359 bootstrap的弹出层嵌套有一个问题 ,当子modal关闭时父的m ...
bootstrap中modal弹出框的使用
modal按钮位置安放: <button class="btn btn-primary" onclick="edit()" data-toggle=&qu ...
关闭Bootstrap的modal后，重新打开还会有input里上传的file解决
场景点击modal模态框,有一个file类型的input,上传完文件后,将其关闭, 再次打开还会有上传的文件. 代码: <div class="modal inmodal" ...
Antd 多层Modal+Form组件嵌套如何在父级组件中清空子级组件状态与数据？
转载: https://segmentfault.com/q/1010000012330765/a-1020000012395950 官网还提供了一个办法,每次点开modal的时候给它设置一个新key ...

bootstrap多层modal的相关问题

1、bootstrap多层modal关闭后无滚动问题

2、Bootstrap页面中多个modal报“too much recursion”

其他

方法一

方法二

bootstrap多层modal的相关问题相关推荐

最新文章

热门文章