web-dev-qa-db-de.com

Twitter-Bootstrap-Modalfehler

Ich versuche einen Modal in einem anderen Modal zu haben. Ich habe jedoch einen Fehler wie "zu viel Rekursion" in Firefox erhalten.

Ich habe die neuesten jQuery und Twitterbootstrap verwendet, habe aber immer noch dieses Problem.

Hier ist der Plunker der den Fehler anzeigt

Sie können "Unrecept RangeError: Maximale Aufrufstackgröße überschritten" oder "zu viel Rekursion" finden

fehler in der Konsole

Weiß jemand, wie man das repariert? Vielen Dank

javascriptjquerytwitter-bootstrap
55
maxisam

Ok, es scheint ein Problem zu sein, das entdeckt wurde.

(anscheinend sollte ich Schlüsselwort "Unceaset RangeError: Maximale Aufrufstackgröße überschritten" anstelle von "zu viel Rekursion" :()

Hier sind die Lösungen.

1. modal.js ändern

in diesem Beitrag https://github.com/twbs/bootstrap/pull/5022

@onassar bringt eine Lösung auf

Follow-up: für alle, die mit bootstrap-modal v2.2.0 arbeiten, in der enforceFocus-Methode, die das auskommentiert. $ element.focus () scheint .__ zu beheben. die Angelegenheit.

Das Ergebnis ist, dass sich das Modal nicht darauf konzentriert (pfft, ich kann das selbst tun: P), und daher fordern die mehreren Modale nicht heraus. ein anderes für den Fokus (was zu einer Endlosschleife und einer rangerror/rekursiven Schleife führte).

Hoffentlich hilft das :)

Ich habe es versucht und es funktioniert. ( plunker )

2. Benutze ein anderes Plugin um dieseDemo anzusprechen

Es scheint, dass es ziemlich gut funktioniert.

3. Warten Sie auf die offizielle Lösung.

In ihrer Roadmap wollen sie dieses modale Plugin irgendwann neu schreiben.

34
maxisam

Sie können die erste Lösung von maxisam answer anwenden, ohne die Bootstrap-Dateien zu ändern (falls dies nicht möglich ist oder nicht).

Schreiben Sie diese Zeile einfach irgendwo, nachdem Bootstrap-Dateien eingefügt wurden.

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

Hinweis: Dies wurde nur mit Bootstrap 2 getestet, nicht mit Bootstrap 3.

101
Tony - Currentuser.io

Die Antwort von SmartLove ist leider zu kurz. Wenn Sie zu no-op $.fn.modal.Constructor.prototype.enforceFocus wechseln, sollten Sie ihn zurücksetzen, wenn Ihr Modal geschlossen wird. Folgendes ist direkt aus unserem Code, über den ich keine Bedenken in Produktion habe:

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

4. Oder Sie könnten Folgendes tun, wenn Sie einen neuen Modal anzeigen:

  1. Blenden Sie alle derzeit aktiven Modalitäten aus
  2. Zeige den neuen Modal

  3. Wenn Sie den neuen Modal schließen, zeigen Sie zuvor ausgeblendete Modal (s) an.

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

Hinweis: Ich verwende $.one, um den Listener nur einmal anwenden zu lassen, und bind/unbind (on/off)

7
Matyas

Versuchen Sie folgendes CSS. Es hat für mich funktioniert.

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

Ersetzen Sie für Bootstrap 4: $.fn.modal.Constructor.prototype.**enforceFocus**By $.fn.modal.Constructor.prototype.**_enforceFocus**

1
bbastou

Ich habe das mit einem Stack gelöst.

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