Errore di modal di avvio multiplo di Twitter

Provo ad avere una modale dentro un’altra modale. Tuttavia, ho trovato un errore come “troppa ricorsione” in Firefox.

Ho usato l’ultimo jQuery e Twitterbootstrap ma ho ancora questo problema.

Ecco il plunker che mostra l’errore

Puoi trovare “Uncaught RangeError: Maximum stack stack size exceeded” o “too recursion”

errore in console

Qualcuno sa come aggiustarlo? Grazie

È ansible applicare la prima soluzione di risposta maxisam, senza modificare i file bootstrap (se non è ansible o non si desidera).

Basta scrivere questa riga da qualche parte dopo che i file bootstrap sono stati inclusi.

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

Nota: questo è stato testato solo con Bootstrap 2, non con Bootstrap 3.

Ok, sembra un problema che è stato scoperto.

(a quanto pare dovrei usare la parola chiave “Uncaught RangeError: Maximum stack stack call exceeded” invece di “too recursion” :()

Ecco le soluzioni.

1. modifica il file modal.js

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

@onassar presenta una soluzione

Follow-up: per chi lavora con bootstrap-modal v2.2.0, nel metodo enforceFocus, commentandolo. $ Element.focus () sembra risolvere il problema.

Il risultato di questo è che le modali non si focalizzano su (pfft, posso farlo io stesso: P), e quindi, le modali multiple non si sfidano l’un l’altra per la messa a fuoco (che ha provocato un loop infinito, e un rangerror / loop ricorsivo).

Spero possa aiutare 🙂

Ho provato e funziona. ( plunker )

2. Usa un altro plugin per affrontare questa Demo

Sembra che funzioni abbastanza bene.

3. Attendi la soluzione ufficiale.

Nella loro roadmap , vogliono riscrivere questo plugin modale a un certo punto.

La risposta di SmartLove purtroppo non è sufficiente; se stai andando a no-op $.fn.modal.Constructor.prototype.enforceFocus , dovresti resettarlo quando la tua modale si chiude; il seguente è direttamente dal nostro codice, di cui non ho esitazioni a mettere in produzione:

 // 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 }); 

4. O si potrebbe fare quanto segue quando si mostra una nuova modale:

  1. Nascondi qualsiasi modale attualmente attivo
  2. Mostra la nuova modal
  3. Quando chiudi la nuova modale, mostra le modal precedentemente nascoste

     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'); } }; 

Nota: uso $.one per fare in modo che il listener venga applicato una sola volta e che non si preoccupi di bind / unbind ( on / off )

Ho risolto questo utilizzando una pila.

 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 } }); }); 

Prova il seguente css. Ha funzionato per me.

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

Per Bootstrap 4, sostituire: $.fn.modal.Constructor.prototype.**enforceFocus** Per $.fn.modal.Constructor.prototype.**_enforceFocus**