Waarom meerdere modale gebruik van twitter bootstrap kreeg fout te veel recursie?

Ik probeer een modale binnen een andere modale hebben. Echter, kreeg ik een foutmelding als too much recursionin firefox.

Ik gebruik gemaakt van de nieuwste jQuery en Twitter bootstrap maar dit probleem nog steeds.

Hierbij plunker dat de foutmelding

U kunt fouten in de console vind Uncaught RangeError: Maximum call stack size exceededof too much recursion

Weet iemand hoe dit te verhelpen? Bedankt

Antwoord 1, Autoriteit 100%

U kunt de eerste oplossing van maxisam antwoord toe te passen, zonder wijziging van bootstrap-bestanden (als je niet kunt of niet wilt).

Schrijf gewoon deze lijn ergens na bootstrap bestanden zijn opgenomen.

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

. Opmerking: Dit is getest met Bootstrap 2 alleen, niet met Bootstrap 3

Antwoord 2, Autoriteit 31%

Ok, het lijkt wel een probleem dat is ontdekt. ​​

(blijkbaar moet ik sleutel woord “Uncaught RangeError: Maximum call stack grootte overschreden” in plaats van “te veel recursie” :()

Hier zijn de oplossingen.

1. de modal.js wijzigen

In deze post https://github.com/twbs/bootstrap/pull/5022

@onassar brengen een oplossing

Follow-up: voor iedereen die met bootstrap-modale v2.2.0, in de
enforceFocus methode, commentaar op dat. $ element.focus () lijkt fix
de kwestie.

Het resultaat hiervan is de modale’s laat je niet gericht op (pfft, kan ik
dat zelf: P), en dus de meervoudige hulpwerkwoorden niet uitdaging
een-andere voor scherpstelling (waardoor een oneindige lus, en
rangerror / recursieve lus).

Hoop dat het helpt:)

Ik heb geprobeerd en het werkt. (plunker )

2. // Jschr: Gebruik andere plugin om dit Demo

Het lijkt alsof het werkt vrij goed.

3. Wachten op de officiële oplossing.

In hun roadmap , doen ze dit willen modale plugin herschrijven op een bepaald punt.

Antwoord 3, Autoriteit 29%

SmartLove’s antwoord helaas te kort; . Als je gaat naar niet-op $.fn.modal.Constructor.prototype.enforceFocus, moet u dit opnieuw instellen wanneer uw modale sluit; Het volgende is direct van onze code, waarover ik heb geen moeite mee het in productie:

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

Antwoord 4, Autoriteit 6%

4. Of je kan de volgende bij het weergeven van een nieuw modaal doen:

1. Verberg elke modale die momenteel actief is
2. Geef de nieuwe modal

3. Als u de nieuwe modale sluiten, vertonen eerder verborgen modaal (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');
       }
   };
   

Opmerking: ik gebruik $.oneom de luisteraar slechts één keer toe te passen en niet om bind/unbind(on/off)

Antwoord 5, autoriteit 3%

Voor Bootstrap 4 vervangt u:
$.fn.modal.Constructor.prototype.**enforceFocus**
Door
$.fn.modal.Constructor.prototype.**_enforceFocus**

Antwoord 6, autoriteit 2%

Probeer de volgende css. Het werkte voor mij.

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

Antwoord 7, autoriteit 2%

Bootstrap 5-versie van @Dexygen antwoord:

const enforceModalFocusFn = bootstrap.Modal.prototype._enforceFocus ;    
const onMyModalHidden = function(){
   bootstrap.Modal.prototype._enforceFocus = enforceModalFocusFn;
}
//let modalElem = ...;
modalElem.addEventListener('hidden.bs.modal', onMyModalHidden);
bootstrap.Modal.prototype._enforceFocus = function () {};

Belangrijke opmerking: u moet de functie overschrijven voordat de modal wordt weergegeven. Dat betekent dus op ‘show.bs.modal’. Als u override later initialiseert, d.w.z. op ‘shown.bs.modal’, zal het niet werken, omdat de oorspronkelijke functie al is doorgegeven.

Hetzelfde werkt voor offcanvas (dat was wat ik nodig had), verander gewoon .Modal in .Offcanvas en _enforceFocus in _enforceFocusOnElement

Antwoord 8

Ik heb dit opgelost met een stapel.

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

Antwoord 9

U kunt het volgende weglaten: tabindex="-1", bovenaan modal kunt u het modale openen op de volgende manier: $('#modal').show();en sluit: $('#modal').hide();

Opmerking: JQueryis vereist om dit te laten werken.