bootstrap modal supprime la barre de défilement


Réponses:


115

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.


pouvez-vous être plus précis?
El Dude

1
Ajout de quelques détails supplémentaires. Mieux maintenant?
flup

14
Il est plus approprié d'utiliser overflow-y: scroll, qui, je pense, répond mieux à l'intention de la question OP. Utiliser le débordement: le défilement ajoutera une barre de défilement horizontale au bas de l'écran.
Scott

1
parfait, fonctionne également avec les modaux à sangle angulaire, peut simplement inclure le CSS ci-dessus dans un <style></style>intérieur templateUrlafin qu'il n'inflige pas d'autres modaux dans l'application.
davidkonrad

2
Utiliser le débordement: hériter; au lieu. De cette façon, le modal ne supprime pas le défilement lorsque vous avez le défilement et n'ajoute pas le défilement lorsque vous ne l'avez pas
Alisson Alvarenga

32

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;
}

C'est la vraie réponse. le défilement de débordement affecte toujours un élément dans mon cas.
Coisox

25

j'ai utilisé

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

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


nous pourrions le combiner avec la réponse de @Alisson Alvarenga et utiliser overflow-y: inherit;
duodvk

23

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.


1
THX. De plus, si le popup modal a besoin de défiler et que le parent doit rester immobile .modal-body {max-height: calc (100vh - 210px); débordement-y: automatique; } .modal-open {débordement: caché; overflow-y: faire défiler; padding-right: 0! important; }
Oracular Man

9

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>

J'ai eu un problème où je remplaçais l'événement hide.bs.modal afin de pouvoir exécuter du code personnalisé lorsque le modal était masqué, mais ce que je ne réalisais pas, c'est que cela empêchait la classe modal-open d'être supprimée du corps - par conséquent, ma barre de défilement n'est pas revenue lors de la fermeture de ce modal spécifique. Je ne supprime pas manuellement la classe modale ouverte dans mon code hide.bs.modal et cela résout ce problème.
Jim

1
Vous devriez juste avoir besoin d'ajouter un data-dismiss="modal"attribut à votre lien au lieu de faire quelque chose de personnalisé comme celui-ci. Bootstrap effectuera toutes les actions de fermeture appropriées lorsque vous cliquerez sur ce lien.
nollidge

1
data-licenciement = "modal" ne fonctionne pas dans mon cas car j'appelle une fonction dans le contrôleur angulaire. La solution jQuery suggérée fonctionne très bien pour moi.
gianni

5

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?


Quand j'ai ajouté body {overflow-y: scroll;}, mon problème a été résolu. Merci Monsieur.
FrenkyB

1

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;
}

3
Cela semble contenir les mêmes informations que l'autre réponse à cette question. Si votre réponse est différente, modifiez-la pour clarifier ce qui est exactement différent. Veuillez ajouter une nouvelle réponse uniquement si vous avez quelque chose de nouveau.
Jeffrey Bosboom

1
Il contient la même réponse mais a une autre manière de l'expliquer. Parfois, la compréhension dépend de la façon dont elle est expliquée.
NormanCabilatazan

1
Tous les lecteurs ne pouvaient pas avoir la même idée. Mieux vaut donner une autre façon de l'expliquer pour qu'ils comprennent clairement.
NormanCabilatazan

1

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;
}

0

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;
}

0

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.


0

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>

0

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

.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.