Twitter引导多个模式的错误

我尝试在另一个模态中有一个模态。 但是，我得到了一个像“太多recursion”在Firefox中的错误。

我用最新的jQuery和Twitterbootstrap，但仍然有这个问题。

这是显示错误的重击者

你可以find“Uncaught RangeError：Maximum call stack size exceeded”或“too much recursion”

控制台错误

任何人都知道如何解决它？ 谢谢

Answer 1

您可以应用maxisam答案的第一个解决scheme，而无需修改引导程序文件（如果您不能或不想）。

在包含引导文件之后，只要在这个地方写上这一行。

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

注意：这已经用Bootstrap 2进行了testing，而不是Bootstrap 3。

Answer 2

好吧，这似乎是一个已经发现的问题。

（显然我应该使用关键词“未捕获RangeError：最大调用堆栈大小超过”，而不是“太多recursion”:(）

这是解决scheme。

1.修改modal.js

在这篇文章中， https://github.com/twbs/bootstrap/pull/5022

@onassar提出一个解决scheme

跟进：对于使用bootstrap-modal v2.2.0的人来说，在enforceFocus方法中，注释掉。$ element.focus（）似乎解决了这个问题。

这样做的结果是模态不会专注于（pfft，我可以自己做：P），因此，多模态不会互相挑战焦点（导致无限循环， rangerror /recursion循环）。

希望帮助:)

我试过了，它工作。 （ 猛击 ）

2.使用另一个插件来解决这个 演示

看起来它工作得很好。

3.等待官方解决scheme。

在他们的路线图中 ，他们确实想在某个时候重写这个模式插件。

Answer 3

SmartLove的答案不幸的是， 如果您要$.fn.modal.Constructor.prototype.enforceFocus ，则应在模式closures时将其重置; 以下是直接从我们的代码，我没有任何疑虑投入生产：

 // Since confModal is essentially a nested modal it's enforceFocus method // must be no-op'd or the following error results // "Uncaught RangeError: Maximum call stack size exceeded" // But then when the nested modal is hidden we reset modal.enforceFocus var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; $.fn.modal.Constructor.prototype.enforceFocus = function() {}; $confModal.on('hidden', function() { $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; }); $confModal.modal({ backdrop : false }); 

Answer 4

4.或者你可以在显示一个新的模态时进行以下操作：

1. 隐藏当前活动的任何模式
2. 显示新的模式

3. 当你closures新的模态时，显示先前隐藏的模态（s）

    var showModal = function ($dialog) { var $currentModals = $('.modal.in'); if ($currentModals.length > 0) { // if we have active modals $currentModals.one('hidden', function () { // when they've finished hiding $dialog.modal('show'); $dialog.one('hidden', function () { // when we close the dialog $currentModals.modal('show'); }); }).modal('hide'); } else { // otherwise just simply show the modal $dialog.modal('show'); } }; 

注意：我使用$.one只有侦听器应用一次，而不必关心bind / unbind （ on / off ）

Answer 5

我用堆栈解决了这个问题。

 var openmodals = []; $(function(){ var ts = new Date().getTime(); $("div.modal").each(function( d ) { ts++; $( this ).data( "uid", ts ); }); // after closing > 1 level modals we want to reopen the previous level modal $('div.modal').on('show', function ( d ) { openmodals.push({ 'id' : $( this ).data( "uid" ), 'el' : this }); if( openmodals.length > 1 ){ $( openmodals[ openmodals.length - 2 ].el ).modal('hide'); } }); $('div.modal').on('hide', function ( d ) { if( openmodals.length > 1 ){ if( openmodals[ openmodals.length - 1 ].id == $( this ).data( "uid" ) ){ openmodals.pop(); // pop current modal $( openmodals.pop().el ).modal('show'); // pop previous modal and show, will be pushed on show } } else if( openmodals.length > 0 ){ openmodals.pop(); // last modal closing, empty the stack } }); }); 

Answer 6

尝试下面的CSS。 它为我工作。

 span.select2-container { z-index:10050; }