为什么使用 twitter bootstrap 的多模态错误太多递归?

IT技术 javascript jquery twitter-bootstrap
2021-03-03 03:42:19

我尝试在另一个模态内有一个模态。但是,我遇到了类似too much recursionFirefox的错误

我使用了最新的 jQuery 和 Twitter 引导程序,但仍然有这个问题。

这是显示错误plunker

您可以在控制台Uncaught RangeError: Maximum call stack size exceededtoo much recursion

有谁知道如何修理它?谢谢

6个回答

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

只需在包含引导程序文件后的某处写下这一行。

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

注意:这仅在 Bootstrap 2 上测试过,没有在 Bootstrap 3 上测试过。

@Davo“让一切尽可能简单,但不要更简单。” - 艾尔伯特爱因斯坦; 请参阅我的答案以了解更强大的执行方式,该方式应该保留其他模式的强制聚焦功能
2021-04-17 03:42:19
这是一个很好的答案。节省了我很多时间。你知道为什么会出现这个问题吗?
2021-04-17 03:42:19
谢谢,这比编辑源代码容易得多,我只能在需要它的页面上使用它。
2021-05-02 03:42:19
我尝试使用具有 ModalManager ( github.com/jschr/bootstrap-modal ) 的Bootstrap Modal来堆叠模态。事实证明,您需要从模态中创建和调用模态才能使其工作。这成功了!
2021-05-05 03:42:19
这很有效,但是这样做有任何副作用吗?
2021-05-17 03:42:19

好吧,看来是发现了一个问题。

(显然我应该使用关键字“未捕获的范围错误:超出最大调用堆栈大小”而不是“递归过多”:()

以下是解决方案。

1.修改modal.js

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

@onassar 提出解决方案

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

这样做的结果是模态不会被关注(pfft,我自己可以做到:P),因此,多个模态不会相互挑战焦点(这导致了无限循环,并且范围错误/递归循环)。

希望有帮助:)

我试过了,它有效。(笨蛋)

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

看起来它工作得很好。

3.等待官方解决。

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

不幸的是,SmartLove 的回答不够完善;如果你要 no-op $.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 });
抱歉,我不清楚这$confModal是对我的代码中已经实例化的模态的引用——只需将其替换为对您自己的实例化模态的引用
2021-04-21 03:42:19
例如,您可以使用 $('modal') 更改 $confModal。它应该使用引导程序工作。$('modal').on('hidden', function() { $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; });
2021-04-24 03:42:19
如果ReferenceError: $confModal is not defined发生错误怎么办?
2021-04-28 03:42:19
我不太了解该框架,无法准确了解enforceFocus 的作用。然而,它只是一定是最好的设置它回到它原来的功能/值完成后压倒它的时候了,这是在所有的JavaScript框架最佳实践-比如这是我在学着做那种事我使用 ExtJS 的 4.5 年。
2021-05-15 03:42:19

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)

加载是非常普遍的东西,并且贯穿整个项目。也许您可以为此组合一个自定义组件,这样它就不会干扰引导程序。(至少这是我在我的项目中所做的)
2021-04-30 03:42:19
这是一个好主意,但是,如果第二个模态是加载弹出模态,通常您也希望在屏幕上保留前一个。
2021-05-02 03:42:19

对于 Bootstrap 4,替换 : $.fn.modal.Constructor.prototype.**enforceFocus** By $.fn.modal.Constructor.prototype.**_enforceFocus**