Bootstrap Modal Issue – Le défilement est désactivé

J’ai un modal et dans ce modal, il y a une liste déroulante qui affiche un contenu caché volumineux, qui fonctionne.

Désormais, lorsque vous ouvrez le prochain modal, empilé sur le premier et le supprimez, le défilement sur le modal inférieur est désactivé.

J’ai créé un exemple complet, comprenant les étapes à suivre pour reproduire le problème auquel je suis confronté. Vous pouvez le voir ici .

                First Modal
 
    1) Open This First:   
  2) Change this once you have opened the modal above.  Show Small Content Show Large Content  
  Large Textarea Content.. Try and scroll to the bottom..  
   Example Text Box  
 
 
   
 
 
 
      Second Modal
 
  This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll...  
   
 
 
 
     $(document).ready(function() { $(".content-div").hide(); $("#change").change(function() { $(".content-div").hide(); $("#" + $(this).val()).show(); }); });

Voici un Bootply pour montrer le comportement en action:

Bootply

C’est aussi une solution

 .modal { overflow-y:auto; }

http://www.bootply.com/LZBqdq2jl5

Auto fonctionne bien 🙂 Cela corrigera en fait tout modal dont la taille est supérieure à celle de votre écran.

J’ai trouvé une solution pour vous. Je ne sais pas pourquoi cela ne fonctionne pas, mais un code à la ligne dans votre code CSS résoudra le problème. Après la fermeture de la deuxième modale, les premières se overflow-y:hidden . Même si son réglage est auto .

Vous devez réécrire ceci et définir votre propre déclaration en CSS:

 #modal_1 { overflow-y:scroll; }

Ici vous avez une DEMO qui fonctionne

Edit : mauvais lien, désolé.

En effet, lorsque vous fermez un modal, il supprime l’ modal-open de la . Bootstrap ne supporte pas plusieurs modaux sur la même page (au moins jusqu’à BS3).

Une façon de le faire fonctionner consiste à utiliser l’événement hidden.bs.modal déclenché par BS lors de la fermeture d’un modal, puis à vérifier si un autre modal est ouvert afin de forcer la classe modal-open sur le corps.

 // Hack to enable multiple modals by making sure the .modal-open class // is set to the  when there is at least one modal open left $('body').on('hidden.bs.modal', function () { if($('.modal.in').length > 0) { $('body').addClass('modal-open'); } });

Suivez https://github.com/nakupanda/bootstrap3-dialog/issues/70 add

 .modal { overflow: auto !important; }

à vos css

 $(document).ready(function () { $('.modal').on("hidden.bs.modal", function (e) { //fire on closing modal box if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close $('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page } }); }); //this code segment will activate parent modal dialog //after child modal box close then scroll problem will automatically fixed

Je suppose que c’est à cause d’un bogue dans le bootstrap de Twitter. Il semble supprimer la classe modal-open du corps, même si deux modaux étaient ouverts. Vous pouvez removeClass un test pour la fonction removeClass de jQuery et le contourner s’il rest encore un modal (le crédit de la fonction de base va à cette réponse: https://stackoverflow.com/a/1950199/854246 ).

 (function(){ var originalRemoveClassMethod = jQuery.fn.removeClass; jQuery.fn.removeClass = function(){ if (arguments[0] === 'modal-open' && jQuery('.modal.in').length > 1) { return this; } var result = originalRemoveClassMethod.apply( this, arguments ); return result; } })();

J’ai résolu le problème en supprimant data-dismiss="modal" et en ajoutant

 setTimeout(function(){ $('#myModal2').modal('show') }, 500); $('#myModal1').modal('hide');

J’espère que ça aide

Premièrement, plusieurs modes ouverts ne sont pas pris en charge par Bootstrap. Voir ici: Documents Bootstrap Modal

Plusieurs modaux ouverts non pris en charge. Veillez à ne pas ouvrir un modal pendant qu’un autre est encore visible. Afficher plusieurs modaux à la fois nécessite un code personnalisé.

Mais, si vous devez, vous pouvez append ce morceau de CSS dans votre feuille de style personnalisée, à condition qu’il soit inclus après la feuille de style Bootstrap principale:

 .modal { overflow-y:auto; }

Ajoutez via JQuery la classe ‘modal-open’ au corps. Je présume que le parchemin fonctionne sur tout sauf sur le modal.

Comme commentaire pour les réponses précédentes: l’ajout de la propriété de débordement au modal (via CSS) aide, mais vous aurez ensuite deux barres de défilement dans la page.

C’est aussi une solution

 .modal.fade .modal-dialog{ -webkit-transform: inherit; }

J’ai en fait trouvé une solution pour cela. Vous devez en fait activer le défilement pour le corps de votre page si vous utilisez $('#myModal').hide(); cacher un modèle. Il suffit d’écrire la ligne suivante après $('#myModal').hide(); :

 $('body').attr("style", "overflow:auto")

Cela réactivera le défilement.