web-dev-qa-db-fra.com

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 .

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <title></title>
    <style>

    </style>
</head>
<body>


    <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" >

    <div class="modal fade" id="modal_1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">First Modal</h4>
                </div>
                <div class="modal-body">



                    <form class="form">

                        <div class="form-group">
                            <label>1) Open This First: </label>
                            <input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" >
                        </div>

                        <div class="form-group">
                            <label>2) Change this once you have opened the modal above.</label>
                            <select id="change" class="form-control">
                                <option value="small">Show Small Content</option>
                                <option value="large">Show Large Content</option>
                            </select>
                        </div> 

                        <div id="large" class='content-div'>
                            <label>Large Textarea Content.. Try and scroll to the bottom..</label>
                            <textarea rows="30" class="form-control"></textarea>

                        </div>

                        <div id="small" class='content-div'>
                            <label> Example Text Box</label> 
                            <input type="text" class="form-control">
                        </div>  


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modal_2">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Second Modal</h4>
                </div>
                <div class="modal-body">

                    <hp>This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... </h5>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script>

    $(document).ready(function() {


        $(".content-div").hide();
        $("#change").change(function() {
            $(".content-div").hide();
            $("#" + $(this).val()).show();
        });


    });

</script>
</html>

Voici un Bootply pour montrer le comportement en action:

Bootply

jqueryhtmltwitter-bootstrap
43
Carl Smith

C'est aussi une solution

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto fonctionne très bien :) Cela corrigera tout modal dont la taille est supérieure à celle de votre écran.

54
Jake Taylor

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 obtiennent overflow-y:hidden en quelque sorte. Même si sa valeur est auto en fait.

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

#modal_1 {
    overflow-y:scroll;
}

Ici vous avez un travail _ DEMO

Edit: mauvais lien, désolé.

32
Kamil

En effet, lorsque vous fermez un modal, il supprime le modal-open de la balise <body>. 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 pour forcer la classe modal-open sur le corps.

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

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

.modal { overflow: auto !important; }

à vos css

8
truongpmcs
$(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
7
KATJ Srinath

Je suppose que cela est 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 choisir un test pour la fonction removeClass de jQuery et le contourner s'il reste 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;
    }
})();
2
Joseph Marikle

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

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é.

Cependant, si vous le devez, vous pouvez ajouter ce morceau de CSS dans votre feuille de style personnalisée, à condition qu'il soit inclus after la feuille de style Bootstrap principale:

.modal {
    overflow-y:auto;
}
2
FastTrack

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

2
Sunny A

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.

0
user3947257

C'est aussi une solution

.modal.fade .modal-dialog{
   -webkit-transform: inherit;
}
0
Sameera Prasad Jayasinghe

J'ai en fait trouvé une solution pour cela. Vous devez activer le défilement pour le corps de votre page si vous utilisez $('#myModal').hide(); pour masquer 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. 

0
Jordan

Pour le bootstrap 4, je devais ajouter! Important

.modal {
    overflow-y: auto !important;
}

Si cela n'est pas fait, cela ne fonctionne pas et il n'est pas appliqué.

entrez la description de l'image ici

0
Manu Burrero Sánchez

Ce code a résolu le mien, quand la seconde popup est fermée, ma première popup ne peut plus défiler.

$('body').on('hidden.bs.modal', '#SecondModal', function (e) {
  if ($('#FirstModal').is(':visible')) { // check if first modal open 
    $('body').addClass('modal-open'); // re-add class 'modal-open' to the body because it was removed when we close the second modal
    $('#FirstModal').focus(); // Focus first modal to activate scrollbar
  }
});
0
Aurelie PATRICIA