web-dev-qa-db-fra.com

Comment empêcher le défilement du contenu du corps lorsque bootstrap modal est ouvert

J'utilise l'interface utilisateur angulaire Bootstrap Boîte modale . Lorsque le modal ouvre le corps a un parchemin. Lorsque je fais défiler le contenu derrière le modal, il défile également. 

Je peux définir un débordement: masqué par la balise body et cela résout le problème. Cependant, si j'ai beaucoup de contenu dans mon modal, j'ai besoin d'un défilement à afficher. Ce défilement ne doit pas être à l'intérieur du modal, c'est-à-dire que lorsque je l'utilise, le modal ne doit défiler que le contenu. Plunker ici

angularjstwitter-bootstrapangular-ui
19
Neil

En fait, je suis confronté au même problème en utilisant l'interface utilisateur Bootstrap et j'ai trouvé une solution de contournement. En ouvrant le modal, vous ajoutez une classe (.ovh) au corps, qui définit le débordement sur masqué. Lorsque vous fermez/supprimez le modal, vous supprimez cette classe afin que le défilement soit à nouveau possible.

Voir ma fourche de votre violon ici: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

Note que j'ai placé la classe dans le fichier index.html, uniquement à des fins de démonstration. De plus, j'ai injecté $document dans la définition du contrôleur, pour utiliser la référence fournie par angular.

9
martinczerwi

Une légère modification de la réponse de dreamhigh qui a bien fonctionné pour moi comprenait l'ajout de la position: corrigée pour les appareils iOS:

body.modal-open {
    position: fixed;
    overflow: hidden;
}

Ajustez également la fenêtre d'affichage pour désactiver la mise à l'échelle de l'utilisateur afin d'empêcher les entrées de zoomer automatiquement et d'introduire des barres de défilement sur le contenu du corps:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Crédit à ce message: Bootstrap 3: barre de défilement horizontale sur iPhone après la mise au point du formulaire

Grâce à ces deux modifications, j'ai pu obtenir que les formes modales angularjs se comportent bien sur iOS.

10
Derek

Pour ceux qui utilisent Angular JS et l’UI Bootstrap. Voici ce qu'il a fallu pour que je le fasse fonctionner. Ma situation était un peu différente. J'ai eu un Modal qui a bien fonctionné et qui a bien défilé. J'avais alors un bouton sur ce modal qui ferait apparaître un autre modal. Une fois ce deuxième modal fermé, le modal initial ne défilerait plus. C'est tout ce qu'il a fallu:

.modal.in {
  overflow-x: hidden;
  overflow-y: auto;
}
5
Grandizer

Je viens de mettre en dessous de CSS et maintenant le défilement du corps est masqué chaque fois que la fenêtre contextuelle modale est ouverte. J'utilise l'interface utilisateur angulaire Bootstrap.

.modal-open {
  overflow: hidden !important;
  position: relative
}
3
Prashant

Lorsque vous ajoutez un débordement: masqué, le défilement de la page d’arrière-plan est masqué. Cependant, le défilement modal sera visible lors du défilement de la page et le modal sera configuré pour le défilement.

body.modal-open {
    overflow: hidden;
}
2
dreamhigh

Dans bootstrap js commenté en ligne pose le problème, vous pouvez commenter cette ligne comme je le fais.

  this.backdrop(function () {
  var transition = $.support.transition && that.$element.hasClass('fade')

  if (!that.$element.parent().length) {
    that.$element.appendTo(that.$body) // don't move modals dom position
  }

  that.$element
    .show()
    .scrollTop(0)

  if (that.options.backdrop) that.adjustBackdrop()
  that.adjustDialog()

  if (transition) {
    that.$element[0].offsetWidth // force reflow
  }

  that.$element
    .addClass('in')
    .attr('aria-hidden', false)

  //that.enforceFocus()
0
fatih kiymet

Pour moi, la page a défilé lors de la fermeture de la boîte de dialogue et j'ai donc corrigé le fichier ui-bootstrap-tpls.js. Le problème réel est que lors du rejet du modal, removeModalWindow est appelé avec les paramètres 'modalInstance' et 'modalWindow.value.modalOpener'.

Le deuxième paramètre est utilisé pour se concentrer sur l'élément qui a déclenché la fenêtre modale. Supprimez simplement le deuxième paramètre dans les fonctions "ignorer" et "fermer" et votre effet de défilement de page sera résolu. 

'removeModalWindow (modalInstance, modalWindow.value.modalOpener)' devient 'removeModalWindow (modalInstance)'

0
Stephen Howe