Twitter bootstrap several modal errors

Question

I am trying to have a modal inside another modal. However, I got an error like "too much recursion" in firefox.

I used the latest jQuery and Twitterbootstrap, but still have this problem.

Here is a plunker that shows an error

You may find "Uncaught RangeError: Maximum Call Stack Size" or "Too Much Recursion"

error in console

Does anyone know how to fix this? Thanks

Answer 1

Well, this looks like a problem that has been discovered.

(apparently, I should use the keyword "Uncaught RangeError: exceeding the maximum size of the call stack" instead of "too much recursion" :()

Here are the solutions.

1. modify modal.js

in this post https://github.com/twbs/bootstrap/pull/5022

@onassar deduce a solution

Follow-up: for those who work with bootstrap-modal v2.2.0, in the Force Focus method, commenting on this. $ element.focus () seems to fix the problem.

The result of this modal does not focus (pfft, I can do it myself: P), and thus multiple modals do not challenge one or the other for focus (which led to an infinite loop, and a rangerror / recursive loop).

Hope that helps :)

I tried and it works. ( plunker )

2. Use a different plugin to solve this problem. Demo

It seems to work very well.

3. Wait for a formal decision.

In their roadmap, they want to rewrite this modal plugin at some point.

Answer 2

You can apply the first maxisam answer solution without modifying the boot files (if you cannot or don't want to).

Just write this line somewhere after loading the boot files.

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

Note. . This was tested only with Bootstrap 2, not with Bootstrap 3.

Answer 3

SmartLove's answer, unfortunately, does not fit; if you go to no-op $.fn.modal.Constructor.prototype.enforceFocus , you should reset it when your modal closes; The following is straight from our code, which I have no doubt about, introducing into production:

 // Since confModal is essentially a nested modal it 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. Or you can do the following when showing a new modal file:

• Hide any current modal
• Show new modal

• When you close a new modal, show previously hidden modal (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'); } }; 

Note. I use $.one only to listen once and not care about bind / unbind ( on / off )

Answer 5

I solved this using the stack.

 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

Try the following css. It worked for me.

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

Answer 7

For Bootstrap 4, replace: $.fn.modal.Constructor.prototype.**enforceFocus** With $.fn.modal.Constructor.prototype.**_enforceFocus**