bootstrap modal supprime la barre de défilement

Lorsque je déclenche une vue modale dans ma page, la barre de défilement disparaît. C'est un effet ennuyeux car la page d'arrière-plan commence à se déplacer lorsque le modal entre / disparaît. Y a-t-il un remède à cet effet?

Il s'agit d'une fonctionnalité, la classe modal-openest ajoutée au HTML bodylorsque vous affichez le modal et supprimée lorsque vous le masquez.

Cela fait disparaître la barre de défilement puisque le bootstrap css dit

.modal-open {
    overflow: hidden;
}

Vous pouvez remplacer cela en spécifiant

.modal-open {
    overflow: scroll;
}

dans votre propre css.

Je pense que l' héritage est meilleur que le défilement car lorsque vous ouvrez modal, il s'ouvrira toujours avec un défilement, mais lorsque vous n'avez pas de défilement, vous aurez le même problème. Alors je fais juste ceci:

.modal-open {
  overflow: inherit;
}

j'ai utilisé

.modal-open {
  overflow-y: scroll;
}

Dans ce cas vous évitez d'afficher la barre de défilement horizontale

Il est préférable d'utiliser overflow-y: faites défiler et supprimez le remplissage du corps, bootstrap modal ajouté un remplissage au corps de la page.

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

Compatible avec le navigateur IE: le navigateur IE fait la même chose par défaut.

Dieu merci, je suis tombé sur ce post! Je tirais mes cheveux en essayant de comprendre comment récupérer mes barres de défilement lors de la fermeture de la fenêtre en utilisant mon propre lien de fermeture. J'ai essayé les suggestions pour CSS mais cela ne fonctionnait tout simplement pas correctement. Après avoir lu

La classe modal-open est ajoutée au corps HTML lorsque vous affichez le modal et supprimée lorsque vous la masquez. - @flup

J'ai trouvé une solution en utilisant jquery, donc si quelqu'un d'autre a le même problème et que les suggestions ci-dessus ne fonctionnent pas -

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

Je jouais juste avec cette «fonctionnalité» des modaux Bootstrap. Il semble que la .modalclasse a overflow-y:auto;donc le wrapper modal obtient sa propre barre de défilement lorsque le modal lui-même devient trop élevé.

Si vous voulez toujours une barre de défilement (les concepteurs le font souvent) Commencez par définir le corps

body {
    overflow-y:scroll;
}

Puis manipulez .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

Laissez la barre de défilement désactivée sur le corps intacte dans ce cas

Toutes les autres réponses sur cette page ont continué à faire sauter mon contenu.

La tête haute!

Bien que cette solution ait fonctionné pour moi tout le temps, hier, j'ai eu un problème en utilisant ce correctif lorsque le modal est déplaçable et trop grand pour s'adapter à l'écran (verticalement). Cela pourrait avoir quelque chose à voir avec des position:stickyéléments que j'ai ajoutés?

Mieux vaut créer votre propre fichier css pour personnaliser une certaine partie de votre bootsrap.

Ne modifiez pas le fichier css de bootstrap car il changera tout dans votre bootstrap une fois que vous l'utiliserez dans d'autres parties de votre page.

Si votre page est un peu longue, elle fournira automatiquement une barre de défilement. Et lorsque le modal est ouvert, il masquera la barre de défilement car c'est ce que le bootstrap fait par défaut.

Pour éviter de le masquer lorsque modal est ouvert, remplacez-le simplement en mettant le code css (ci-dessous) sur votre propre fichier css.

.modal-open {
    overflow: scroll;
}

juste un vice versa ...

.modal-open {
    overflow: hidden;
}

De plus, si la fenêtre contextuelle modale doit faire défiler avec le contenu à l'intérieur et que le parent doit rester immobile, ajoutez ce qui suit à votre Custom.css (en remplaçant le css)

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

le modal bootstrap ajoute un remplissage une fois qu'il s'ouvre afin que vous puissiez essayer ce code dans votre propre css

.modal-open {
    padding: 0 !important;
}

Cela est probablement dû au fait que le premier modal (lorsqu'il est fermé) supprime la classe modal-open de l'élément body et le second ne l'ajoutera pas lors du déclenchement modal-open.

Dans ce cas, j'utiliserais l'événement pour vérifier si le modal a été complètement fermé / masqué et en ouvrir un autre

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

Cela attendra que le 1er modal soit fermé pour s'assurer que modal-open est supprimé du corps et l'a rajouté lorsqu'il est ouvert.

J'ai juste eu ce problème moi-même, et trouver cette question m'a rapidement aidé à comprendre ce qui causait le comportement. Donc merci.

Cependant, je trouve ces solutions de contournement CSS un peu inélégantes. À moins que vous ne souhaitiez spécifiquement conserver les barres de défilement (bien que je ne puisse pas penser à une raison à cela).

Essentiellement, Bootstrap applique le padding-right à certains éléments pour compenser la suppression de la barre de défilement.

Par conséquent, tout ce que vous avez à faire est de mettre un wrapper supplémentaire avec zéro padding-right autour de votre élément problématique (et de déplacer la classe ciblée vers lui).

c'est-à-dire changer de cela ...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... pour ça...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>

La seule réponse qui a fonctionné pour moi est la suivante:

.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}