web-dev-qa-db-fra.com

le modal bootstrap 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 agaçant car la page d'arrière-plan commence à se déplacer lorsque le modal entre/disparaît. Existe-t-il un remède à cet effet?

javascripttwitter-bootstrapmodal-dialog
69
El Dude

Ceci est une fonctionnalité, la classe modal-open est ajoutée à la variable HTML body lorsque vous affichez le modal et supprimée lorsque vous le masquez.

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

.modal-open {
    overflow: hidden;
}

Vous pouvez remplacer ceci en spécifiant

.modal-open {
    overflow: scroll;
}

dans votre propre css.

93
flup

J'ai utilisé

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

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

25
Mauro

Je pense que inherit est meilleur que scroll parce que quand vous ouvrez modal, il s’ouvrira toujours avec scroll, mais si vous n’avez pas de scroll, vous aurez le même problème. Alors je fais juste ça:

.modal-open {
  overflow: inherit;
}
22
Alisson Alvarenga

Il vaut mieux utiliser overflow-y: faire défiler et supprimer le remplissage du corps, bootstrap modal ajouté au remplissage du 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.

9
Super Model

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

class modal-open est ajouté au corps HTML lorsque vous affichez le modal, et enlevé quand vous le cachez. - @flup

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

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

Je jouais justement avec cette 'fonctionnalité' des modaux Bootstrap . Il semble que la classe .modal a overflow-y:auto; Ainsi, le wrapper modal obtient sa propre barre de défilement lorsque le modal lui-même devient trop haut.

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ésactivante sur le corps intact dans ce cas

Toutes les autres réponses sur cette page n'arrêtaient pas de faire sauter mon contenu.

La tête haute!

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

3
Brainfeeder

Mieux vaut créer votre propre fichier css Pour personnaliser une partie de votre boot.

Ne modifiez pas le fichier css de bootstrap car cela 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, une barre de défilement sera automatiquement fournie. Et quand le modal s’ouvrira, il cachera la barre de défilement car c’est ce que bootstrap fait par défaut. 

Pour éviter de le cacher lorsque modal est ouvert, il suffit de le remplacer en mettant le code css (ci-dessous) sur votre propre fichier css.

.modal-open {
    overflow: scroll;
}

juste un vice versa ...

.modal-open {
    overflow: hidden;
}
1
NormanCabilatazan

le modal bootstrap ajoute un rembourrage une fois ouvert pour vous permettre d'essayer ce code dans votre propre css

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

De plus, si le menu contextuel modal doit faire défiler le contenu et que le parent doit rester immobile, ajoutez les éléments suivants à votre fichier Custom.css (remplacement de css)

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