Twitter引导多个模态错误

Question

我试着在另一个模态中有一个模态.但是,我在Firefox中遇到了"太多递归"的错误.

我使用了最新的jQuery和Twitterbootstrap,但仍然有这个问题.

这是显示错误的plunker

你可以找到"Uncaught RangeError:超出最大调用堆栈大小"或"过多的递归"

控制台错误

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

Answer 1

您可以应用maxisam应答的第一个解决方案,而无需修改引导文件(如果您不能或不想).

在包含bootstrap文件后,只需将此行写入某处.

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

注意:这仅使用Bootstrap 2进行测试,而不是使用Bootstrap 3进行测试.

Answer 2

好吧,这似乎是一个已被发现的问题.

(显然我应该使用关键词"Uncaught RangeError:超出最大调用堆栈大小"而不是"太多递归":()

以下是解决方案.

1.修改modal.js

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

@onassar提出了一个解决方案

跟进:对于使用bootstrap-modal v2.2.0的任何人,在enforceFocus方法中,注释掉.$ element.focus()似乎解决了这个问题.

这样做的结果是模态没有被关注(pfft,我可以自己做:P),因此,多个模态不会相互挑战焦点(导致无限循环,并且rangerror/recursive loop).

希望有帮助:)

我试过,它的工作原理.(plunker)

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

看起来它的效果非常好.

3.等待官方解决方案.

在他们的路线图中,他们确实希望在某些时候重写这个模态插件.

Answer 3

不幸的是,SmartLove的答案不足; 如果你要进行无操作$.fn.modal.Constructor.prototype.enforceFocus,你应该在你的模态关闭时重置它; 以下内容直接来自我们的代码,我没有任何疑虑投入生产:

// 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. 关闭新模态时,显示以前隐藏的模态

   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)