Twitter bootstrap plusieurs modal erreur

J'essaie d'avoir un modal à l'intérieur d'un autre modal. Cependant, j'ai une erreur comme "trop de récursivité" dans firefox.

J'ai utilisé la dernière jQuery et Twitterbootstrap mais le problème persiste.

Ici est la plunker qui montre l'erreur

Vous pouvez trouver des "Uncaught RangeError: le Maximum de la pile d'appels de taille dépassé" ou "trop de récursivité"

erreur dans la console

Quelqu'un sait comment résoudre ce problème ? Grâce

InformationsquelleAutor maxisam | 2012-11-30

104

Vous pouvez appliquer la première solution de maxisam réponse, sans modifier les fichiers d'amorçage (si vous ne pouvez pas, ou ne voulez pas).

Il suffit d'écrire cette ligne quelque part après des fichiers d'amorçage ont été inclus.
```
$.fn.modal.Constructor.prototype.enforceFocus = function () {};
```
Remarque: Cela a été testé avec Bootstrap 2 seulement, pas avec Bootstrap 3.
- J'ai essayé en utilisant Bootstrap Modal qui a un ModalManager (github.com/jschr/bootstrap-modal) pour l'empilage des modaux. S'avère que vous avez besoin pour créer et appeler une modale à partir de l'intérieur d'un modal pour que cela fonctionne. Cela a fait l'affaire!
- Merci, c'est beaucoup plus facile que la modification de la source et je peux l'utiliser uniquement sur les pages où il est nécessaire.
- De cette façon, les œuvres, mais espérons qu'il ne sera pas un problème pour qch d'autre
- tout aussi simple que possible, mais pas plus." - Albert Einstein; voir ma réponse pour une meilleure façon de faire ce qui doit préserver enforceFocus fonctionnalité pour d'autres auxiliaires modaux
- C'est la grande réponse. M'a sauvé beaucoup de temps. Savez-vous pourquoi ce problème se produit?
- Cela fonctionnait très bien, mais sont-il des effets secondaires à le faire?
- Super! Cela fonctionne sur bootstrap 3.
- Le correctif a fonctionné pour moi aussi. Je voulais ajouter que le lancement de 2 auxiliaires modaux n'est pas vraiment valide chose à faire. Le lancement de 2 boîtes de dialogue est OK, mais les auxiliaires modaux pas. L'idée d'un modal est que vous obtenez seulement que le modal, et impossible de cliquer sur quoi que ce soit d'autre. Dans le cas d'une boîte de dialogue vous devriez être en mesure de cliquer sur d'autres choses derrière la boîte de dialogue quand il est actif. jQuery-ui a le même problème avec les auxiliaires modaux, pour l'essentiel, les multiples modals battre les uns contre les autres pour se concentrer.
InformationsquelleAutor Tony - Currentuser.io
34

Ok, il semble comme une question qui a été découvert.

(apparemment je dois utiliser le mot clé "Uncaught RangeError: le Maximum de la pile d'appels de taille dépassé" au lieu de "trop de récursivité" 🙁 )

Voici les solutions.

1. modifier la modal.js

dans ce post, https://github.com/twbs/bootstrap/pull/5022

@onassar apporter une solution

Suivi: pour les personnes qui travaillent avec bootstrap-modale v2.2.0, dans le
enforceFocus méthode, en commentant cette.$de l'élément.focus() semble pour le fixer
la question.

Le résultat de cela est la modale de ne pas me concentrer sur (pfft, je peux
fais moi-même :P), et donc, les multiples modals de ne pas contester
l'un de l'autre pour la mise au point (ce qui a entraîné dans une boucle infinie, et un
rangerror/boucle récursive).

Espère que cela aide 🙂

J'ai essayé et ça fonctionne. (plunker)

2. Utilisation un autre plugin pour répondre à cette Démo

Il semble que cela fonctionne assez bien.

3. Attendre de solution officielle.

Dans leur feuille de route, ils ne veulent réécrire cette modal plugin à un certain point.
- J'ai utilisé votre première solution et cela fonctionne parfaitement. C'était vraiment un problème ennuyeux. Thx!
- La modification de modal.js n'est qu'un faux-suggérant d'autres le faire et puis de l'acceptation de votre propre réponse à cet effet est grossièrement faux
- il y a 3 options que j'ai fourni. Et je pense que ma solution fix ma question, à ce moment, et il fournit des informations pour les autres, donc c'est une bonne réponse pour moi. Je n'utilise pas ce plugin plus . Et TB3 est sorti, je doute que cette réponse est toujours utile. Je heureux que vous pouvez fournir une meilleure solution, après presque une année. Je ne sais pas ce que je dois faire avec elle. Et je ne sais pas pourquoi je ne peux pas modifier le plugin pour mon propre usage. Il peut-être pas parfait, mais il n'y a pas de bien et le mal sur cette question.
- Et merci pour downvoting cette réponse. Bon week-end 🙂
- Oh @GeorgeJempty , il n'est pas de ma réponse, le crédit va à onassar sur github. Je tiens à honneur de son effort.
InformationsquelleAutor maxisam
30

SmartLove la réponse tombe malheureusement de courte; si vous allez à la non-op $.fn.modal.Constructor.prototype.enforceFocus, vous devez le réinitialiser lorsque votre modal ferme; ce qui suit est directement à partir de notre code, sur lequel j'ai aucun scrupule la mise en production:
```
//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 });
```
- Je suis heureux que vous avez trouvé une bonne approche après un an. Je vais vous donner un upvote. Depuis je n'utilise pas ça, je ne sais pas si cela peut parfaitement répondre à mes question à l'époque.
- Je suis prêt à faire un lien de votre réponse, de la mine à mieux orienter les personnes, mais pouvez-vous être plus précis quant à la nature exacte des avantages(s) de votre réponse? J'ai utilisé ma réponse en production depuis plusieurs mois sans problème. Veuillez noter que je n'ai qu'une idée de l'objectif de l'original enforceFocus(). J'ai pensé qu'il assurait automatiquement le focus sur le modal, mais il ne semble pas fonctionner comme ça (même si j'ai supprimer mon hack).
- Je ne sais pas le cadre assez bien pour savoir précisément ce que enforceFocus n'. Cependant, il suffit simplement de doit être préférable de revenir à l'état initial de la fonction/valeur lorsque vous avez fait au cours de l'équitation, et c'est une des meilleures pratiques à travers tous les frameworks Javascript -- par exemple, c'est le genre de chose que j'ai appris à le faire au cours de ma 4,5 ans à l'aide de ExtJS.
- cela a fonctionné parfaitement sur BS3. merci beaucoup pour la solution.
- que faire si ReferenceError: $confModal is not defined erreur se produit?
- Désolé je n'ai pas été clair que $confModal est une référence à un modal dans mon code qui a déjà été instancié -- viens de la remplacer par une référence à votre propre instancié modal
- Vous pouvez changer de $confModal avec $('modal') par exemple. Il devrait fonctionner à l'aide de bootstrap. $('modal').sur('hidden', function() { $.fn.modal.Constructeur.le prototype.enforceFocus = enforceModalFocusFn; });
InformationsquelleAutor George Jempty
7

4. Ou vous pouvez faire ce qui suit lors de l'affichage d'une nouvelle modal:
1. Cacher tout modal qui est actuellement active
2. Montrer la nouvelle modal
3. Lorsque vous fermez le nouveau modal, montrer précédemment caché 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');
    }
};
```
Remarque: j'utilise $.one à l'auditeur de l'appliquer une fois et de ne pas se soucier de bind/unbind (on/off)
- Êtes-vous en utilisant Twitter bootstrap à partir de AngularJS l'INTERFACE utilisateur ?
- Pas de. Je suis l'aide de la version officielle ( 2.3.1 )
- c'est une bonne idée, cependant, si le 2ème modal est un chargement de popup modale, en général, vous voulez garder la précédente sur l'écran en tant que bien.
- le chargement est quelque chose de très général et transversal à l'ensemble du projet. peut-être que vous pourriez mettre ensemble un composant personnalisé pour ça, donc il ne serait pas interférer avec bootstrap. (du moins c'est ce que j'ai fait dans mon projet)
- Oui, j'ai pensé à ça aussi.
InformationsquelleAutor Matyas
2

Essayer le code css suivant. Il a travaillé pour moi.
```
span.select2-container {
    z-index:10050;
}
```
InformationsquelleAutor nidhin
2

Pour Bootstrap 4, remplacer :
$.fn.modal.Constructor.prototype.**enforceFocus**
Par
$.fn.modal.Constructor.prototype.**_enforceFocus**
- Vous sir sont grands. Merci
InformationsquelleAutor bbastou

J'ai résolu ce problème en utilisant une pile.

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

InformationsquelleAutor Ryan

Vous devez vous connecter pour publier un commentaire.