javascript - example - Twitter bootstrap error modal múltiple

bootstrap alert modal

Question

Intento tener un modal dentro de otro modal. Sin embargo, recibí un error como "demasiada recursión" en Firefox.

Usé el último jQuery y Twitterbootstrap pero todavía tengo este problema.

Aquí está el plunker que muestra el error

Puede encontrar "RangeError no capturado: el tamaño máximo de pila de llamadas excedido" o "demasiada recursión"

error en la consola

Alguien sabe como arreglarlo ? Gracias

Answer 1

La respuesta de SmartLove desafortunadamente es corta; si va a no-op $.fn.modal.Constructor.prototype.enforceFocus , debe restablecerlo cuando se cierre su modal; Lo siguiente es directamente de nuestro código, sobre el cual no tengo ningún reparo en poner en producción:

// 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 2

Lo resolví usando 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
}
});
});

Answer 3

Ok, parece que se ha descubierto un problema.

(aparentemente debería usar la palabra clave "RangeError no capturado: el tamaño máximo de pila de llamadas excedido" en lugar de "demasiada recursividad" :()

Aquí están las soluciones.

1. modificar el modal.js

en esta publicación, https://github.com/twbs/bootstrap/pull/5022

@onassar trae una solución

Seguimiento: para cualquier persona que trabaje con bootstrap-modal v2.2.0, en el método enforceFocus, comentando que. $ Element.focus () parece solucionar el problema.

El resultado de esto es que los modal no se enfocan (pfft, puedo hacerlo yo mismo: P), y por lo tanto, los modales múltiples no se desafían entre sí por el enfoque (lo que dio como resultado un ciclo infinito, y un rangerror / loop recursivo).

Espero que ayude :)

Lo intenté y funciona. ( plunker )

2. Utilice otro complemento para abordar esta Demo

Parece que funciona bastante bien.

3. Espere la solución oficial.

En su roadmap , quieren reescribir este complemento modal en algún momento.

Answer 4

Para Bootstrap 4, reemplace: $.fn.modal.Constructor.prototype.**enforceFocus** Por $.fn.modal.Constructor.prototype.**_enforceFocus**

Answer 5

Prueba el siguiente css. Funcionó para mí

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

Answer 6

Puede aplicar la primera solución de respuesta maxisam, sin modificar los archivos de arranque (si no puede, o no quiere).

Simplemente escriba esta línea en algún lugar después de que se hayan incluido los archivos bootstrap.

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

Nota: Esto ha sido probado solo con Bootstrap 2, no con Bootstrap 3.

Answer 7

4. O podría hacer lo siguiente al mostrar un nuevo modal:

1. Ocultar cualquier modal actualmente activo
2. Muestra el nuevo modal

3. Cuando cierre el nuevo modal, muestre modal (es) previamente oculto (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'');
   }
   };

Nota: uso $.one para $.one solo el oyente una vez y no preocuparme por bind / unbind ( off / off )