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

91

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

jquery html twitter-bootstrap Carl Smith
la source
1
"Veillez à ne pas ouvrir un modal tant qu'un autre est encore visible. L'affichage de plus d'un modal à la fois nécessite un code personnalisé" , et enfreint également l'objectif pour lequel les modaux étaient destinés.
Blazemonger
Voir aussi stackoverflow.com/a/24914782/58241 qui contient un correctif non seulement pour le problème de la barre de défilement, mais également pour les problèmes de style
benrwb

Réponses:

119

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.

Jake Taylor
la source
5
Cette solution a résolu mon problème, lors de la fermeture et de l'ouverture des modaux de jQuery$('.modal').css('overflow-y', 'auto');
Gla
Life sauveur) Merci
Victor Gorban
66

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');
    }
});
Molkobain
la source
10
(BS4) Première réponse J'ai pu me mettre au travail, il me suffisait d'utiliser ($ ('. Modal.show'). Length> 0) pour Bootstrap 4.
Shoejep
Merci - mon problème n'était pas tout à fait le même, mais votre commentaire m'a indiqué la classe modale ouverte sur le corps qui est la cause de l'action de défilement de page perdue.
Jon
37

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

Kamil
la source
ne fonctionne pas, cela rend le conteneur défilant mais rend la molette de la souris bloquée également
Kiran Maniya
19 
$(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
KATJ Srinath
la source
3
OMI c'est la meilleure réponse. L'ajout du CSS supplémentaire pour overflow-y: auto fonctionne aussi mais comme mentionné ci-dessous, il en résulte des barres de défilement doubles.
Jacob Rutherford le
1
Fonctionne également avec Bootstrap 4.1. Apprécié
Willi
1
D'accord. testé 2-3 réponses et celui-ci fonctionne pour Twitter Bootstrap 4.2.1.
Tpojka
11

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

.modal { overflow: auto !important; }

à votre css

truongpmcs
la source
2
cette solution créerait deux barres de défilement
Weijing Jay Lin
il y a tellement de solutions ici qu'ils ont dit que cela fonctionnait, j'ai choisi celle-ci pour des raisons de simplicité. a parfaitement fonctionné pour moi. voté.
kapitan
9

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

Manu Burrero Sánchez
la source
6

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;
}
Voie rapide
la source
3

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

Ensoleillé A
la source
Merci @Sunny Je ne sais pas pourquoi les autres solutions ne fonctionnent pas pour moi, mais celle-ci fonctionne définitivement
dev-masih
@MasihAkbari ça pourrait être un problème de version :) Celui-ci m'aide aussi. J'utilise BS4. Cela peut avoir un petit problème de performance en raison d'un retard, mais c'est une solution rapide et facile.
Weijing Jay Lin
3

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');
}
});
ashish dwivedi
la source
3 
$('.modal').css('overflow-y', 'auto');
Usman Asif
la source
2

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;
    }
})();
Joseph Marikle
la source
Comme mentionné par @Blazemonger, Bootstrap ne prend explicitement pas en charge les modaux d'empilement
cvrebert
1

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
  }
});
Aurélie PATRICIA
la source
1

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

});
Jared
la source
0

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.


la source
0

C'est aussi une solution

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

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.

Jordan
la source
0

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");
    });
le chat
la source
0

Ajoutez ceci ci-dessous le code js

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