Problème modal Bootstrap - Le défilement est désactivé

Question 1

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

Maintenant, lorsque vous ouvrez le modal suivant, empilé au-dessus du premier modal et que vous le rejetez, le défilement sur le modal en dessous devient désactivé.

J'ai créé un exemple complet, y compris les étapes 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

Question 2

C'est aussi une solution

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto fonctionne très bien :) Cela corrigera en fait tout modal qui s'exécute plus haut que la taille de votre écran.

Question 3

En effet, lorsque vous fermez un modal, il supprime le modal-opende la <body>balise. Bootstrap ne prend pas en charge plusieurs modaux sur la même page (au moins jusqu'à BS3).

Une façon de le faire fonctionner est d'utiliser l' hidden.bs.modalévénement déclenché par BS lors de la fermeture d'un modal, puis de vérifier s'il y a un autre modal ouvert afin de forcer la modal-openclasse 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');
    }
});

Question 4

J'ai trouvé une solution pour vous. Je ne sais pas pourquoi cela ne fonctionne pas, mais une seule ligne de code dans votre CSS résoudra le problème. Après avoir fermé le deuxième modal, le premier devient en overflow-y:hiddenquelque sorte. Même si sa valeurauto réellement.

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

#modal_1 {
    overflow-y:scroll;
}

Ici vous avez une DEMO fonctionnelle

Edit : mauvais lien, désolé.

Question 5

$(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

Question 6

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

.modal { overflow: auto !important; }

à votre css

Question 7

Pour bootstrap 4, j'ai dû ajouter!

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

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

capture d'écran

Question 8

Tout d'abord, plusieurs modaux ouverts ne sont pas pris en charge par Bootstrap. Voir ici: documentation Bootstrap Modal

Plusieurs modaux ouverts non pris en charge. Veillez à ne pas ouvrir un modal tant qu'un autre est toujours visible. L'affichage de plus d'un modal à la fois nécessite un code personnalisé.

Mais, si vous le devez, vous pouvez ajouter 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;
}

Question 9

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 cela aide

Question 10

Bootstrap ne prenait pas en charge plusieurs modaux en même temps. C'est un bogue Bootstrap. Ajoutez simplement le script ci-dessous pour BS4.

$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
    $('body').addClass('modal-open');
}
});

Question 11

$('.modal').css('overflow-y', 'auto');

Question 12

Je suppose que c'est à cause d'un bogue dans le bootstrap de Twitter. Il semble supprimer la modal-openclasse du corps même si deux modaux étaient ouverts. Vous pouvez effectuer un test pour la removeClassfonction de jQuery et le contourner s'il y a un modal encore ouvert (le crédit pour 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;
    }
})();

Question 13

Ce code a résolu le mien, lorsque la deuxième popup s'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
  }
});

Question 14

Une sorte de hack, mais j'aime juste le fermer et le rouvrir lors de la fermeture modale pour éliminer tout comportement étrange / indésirable. Si vous avez désactivé le fondu, vous ne pouvez pas le remarquer en train de se fermer et de se réouvrir:

var $ModalThatWasOnTop= $('#ModalThatWasOnTop')

$ModalThatWasOnTop.on('hidden.bs.modal', function(e) {
     console.log('closing  modal that was on top of the other modal')
     $('#ModalThatWasCovered').modal('hide');
     $('#ModalThatWasCovered').modal('show');

});

Question 15

Ajoutez via JQuery la classe 'modal-open' au corps. Je suppose que le scroll fonctionne sur tout sauf le modal.

En commentaire aux réponses précédentes: l'ajout de la propriété overflow au modal (via CSS) aide mais vous aurez alors deux barres de défilement dans la page.

Question 16

C'est aussi une solution

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

Question 17

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();pour masquer un modèle. Écrivez simplement la ligne suivante après $('#myModal').hide();:

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

Cela réactivera le défilement.

Question 18

Si vous utilisez bootstrap3 ou 4, assurez-vous d'avoir une classe modal-open dans le corps html. Je ne sais pas si cela est obligatoire, mais peut-être assurez-vous que votre z-index de modal-backdrop est effacé.

    $('.your-second-modal').on('hidden.bs.modal', function (e) {
        $('.your-second-modal').css('z-index', "");
        $('.modal-backdrop').css('z-index', 1040);
        $('body').addClass("modal-open");
    });

Question 19

Ajoutez ceci ci-dessous le code js

    $(document).on("click",".modal",function () {
       if(!$("body").hasClass('modal-open'))
           $("body").addClass('modal-open');
    });