Comment éviter de faire défiler le contenu du corps lors de l'amorçage modal est ouvert
Je suis en utilisant Angulaire UI Bootstrap Modal box. Lorsque la modale s'ouvre le corps a un parchemin. Quand j'ai faites défiler le contenu derrière le modal aussi des parchemins.
Je peux mettre overflow: hidden à la balise body et cela résout le problème. Cependant, si j'ai beaucoup de contenu à l'intérieur de mon modal j'ai besoin d'un rouleau à montrer. Ce livre ne devrait pas être à l'intérieur de l'modal j'.e Quand j'utilise le défilement des pages modal devrait seulement faire défiler et de ne pas le contenu. Plunker ici
Vous devez vous connecter pour publier un commentaire.
Je suis face au même problème, à l'aide de l'INTERFACE utilisateur de Bootstrap, et est venu avec une sorte de solution de contournement. Sur l'ouverture du modal, vous ajoutez une classe (
.ovh
) pour le corps, qui définit le débordement caché. À la clôture/rejet de l'modale, vous enlevez cette classe, ainsi que le défilement est à nouveau possible.Voir ma fourche de votre violon ici: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview
Note que j'ai placé à la classe dans l'index.html juste pour les besoins de la démonstration. D'ailleurs j'ai injecté
$document
dans le contrôleur de la définition, l'utilisation de la référence fournie par angulaire.$scope.$watch('show', function() {<!-- code to add class to the body element-->}
body.ovh { overflow: hidden; }
. Le basculement de cette classe sur le corps bascule capacité à permettre le défilement.Une légère modification de la dreamhigh de la réponse qui a bien fonctionné pour moi inclus l'ajout de position: fixe pour les appareils iOS:
En outre le réglage de la fenêtre d'affichage pour désactiver la mise à l'échelle de garder les entrées de automatiquement le zoom et l'introduction des barres de défilement sur le contenu du corps:
De crédit à ce post:
Bootstrap 3: barre de défilement horizontale sur l'iPhone après la forme de focus
Avec ces deux changements, j'ai été en mesure d'obtenir angularjs formulaires modaux pour bien se comporter sur iOS.
Pour ceux qui utilisent Angular JS et l'INTERFACE utilisateur de Bootstrap. Voici ce qu'il a fallu pour moi de le faire fonctionner. Ma situation était un peu différente. J'ai eu un Modal qui a travaillé et défilent en grand. J'ai eu ensuite un bouton qui modal qui pop une autre modal. Une fois que la deuxième modale a été fermé, la première modal n'aurait plus de défilement. C'est tout ce qu'il a pris:
Je viens de mettre ci-dessous CSS et maintenant le corps de défilement est caché à chaque fois que modal popup est ouvert. Je suis à l'aide Angulaire UI Bootstrap.
Lorsque vous ajoutez overflow:hidden, l'arrière-plan de la page de défilement est caché. Cependant, le modal de défilement sera visible comme le défilement des pages et le modal sera mis à défiler.
Dans le bootstrap js commmented ligne les causes de ce problème, vous pouvez commenter cette ligne comme je le fais.
Pour moi, la page défile lorsque la boîte de dialogue était fermée, donc, je fixe le ui-bootstrap-tpls.js fichier. Le réel problème est que lors du rejet de l'modal, removeModalWindow est appelé avec les paramètres 'modalInstance" et " modalWindow.de la valeur.modalOpener'.
Le deuxième paramètre est utilisé pour se concentrer sur l'élément qui a déclenché la fenêtre modale. Il suffit de retirer le deuxième paramètre dans le "rejeter" et "fonction de fermeture" et votre page de défilement effet sera résolu.
'removeModalWindow(modalInstance, modalWindow.de la valeur.modalOpener) "devient" removeModalWindow(modalInstance)'