Comment empêcher le défilement d’arrière-plan lorsque Bootstrap 3 modal s’ouvre sur les navigateurs mobiles?

Comment empêcher le défilement en arrière-plan lorsque Bootstrap 3 modal s’ouvre sur les plates-formes mobiles? Sur les navigateurs de bureau, l’arrière-plan ne peut pas défiler et fonctionne comme il se doit.

Sur les navigateurs mobiles (Safari ios, Chrome ios, etc.), lorsqu’un modal est ouvert et utilise votre doigt pour le faire défiler, l’arrière-plan défile également comme le modal. Comment puis-je empêcher cela?

Voir ici: https://github.com/twbs/bootstrap/issues/7501

Alors essayez:

$('body').css('overflow','hidden'); $('body').css('position','fixed'); 

V3.0.0. aurait dû résoudre ce problème. Utilisez-vous la dernière version? Si tel est le cas, publiez un problème sur https://github.com/twbs/bootstrap/

Essaye ça,

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

J’ai essayé la réponse acceptée, ce qui empêchait le corps de défiler, mais avait le problème de défiler vers le haut. Cela devrait résoudre les deux problèmes.

En passant, il semble déborder: masqué ne fonctionne pas sur le corps pour iOS Safari uniquement lorsque iOS Chrome fonctionne correctement.

 var scrollPos = 0; $('.modal') .on('show.bs.modal', function (){ scrollPos = $('body').scrollTop(); $('body').css({ overflow: 'hidden', position: 'fixed', top : -scrollPos }); }) .on('hide.bs.modal', function (){ $('body').css({ overflow: '', position: '', top: '' }).scrollTop(scrollPos); }); 
 $('.modal') .on('shown', function(){ console.log('show'); $('body').css({overflow: 'hidden'}); }) .on('hidden', function(){ $('body').css({overflow: ''}); }); 

utilise celui-ci

Aucun script nécessaire.

BS 3 définit une classe .modal-open sur le corps que vous pouvez utiliser pour définir les valeurs de position et de débordement (faites avec LESS).

 body { font-family:'Open Sans'; margin:0; &.modal-open { position:fixed; overflow:hidden; .modal { overflow: scroll; @media only screen and (min-resolution:150dpi) and (max-width: @screen-sm), only screen and (-webkit-min-device-pixel-ratio:1.5) { overflow: scroll; -webkit-overflow-scrolling: touch; } } } } 

Si vous utilisez jQuery, vous pouvez le faire avec scrollTop

  1. Enregistrer la position de défilement vertical du corps;
  2. Désactiver le défilement sur le corps;
  3. Afficher modal
  4. Fermer modal
  5. Reenable scroll sur le corps;
  6. Définir la position de défilement enregistrée.
 #modal { bottom: 0; position: fixed; overflow-y: scroll; overflow-x: hidden; top: 0; width: 100%; } 

La solution choisie fonctionne, mais elle fixe également l’arrière-plan à la position de défilement supérieure. J’ai étendu le code ci-dessus pour corriger ce “saut”.

 //Set 2 global variables var scrollTopPosition = 0; var lastKnownScrollTopPosition = 0; //when the document loads $(document).ready(function(){ //this only runs on the right platform -- this step is not necessary, it should work on all platforms if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) { //There is some css below that applies here $('body').addClass('platform-ios'); //As you scroll, record the scrolltop position in global variable $(window).scroll(function () { scrollTopPosition = $(document).scrollTop(); }); //when the modal displays, set the top of the (now fixed position) body to force it to the stay in the same place $('.modal').on('show.bs.modal', function () { //scroll position is position, but top is negative $('body').css('top', (scrollTopPosition * -1)); //save this number for later lastKnownScrollTopPosition = scrollTopPosition; }); //on modal hide $('.modal').on('hidden.bs.modal', function () { //force scroll the body back down to the right spot (you cannot just use scrollTopPosition, because it gets set to zero when the position of the body is changed by bootstrap $('body').scrollTop(lastKnownScrollTopPosition); }); } }); 

Le CSS est assez simple:

 // You probably already have this, but just in case you don't body.modal-open { overflow: hidden; width: 100%; height: 100%; } //only on this platform does it need to be fixed as well body.platform-ios.modal-open { position: fixed; } 

J’ai également eu un problème avec iPhone + Safari où il fallait append:

 position: fixed; 

Comme mentionné ailleurs, cela a créé un problème de défilement vers le haut. Le correctif qui a fonctionné pour moi était de capturer la position au dessus de l’ouverture modale, puis de l’animer à la position modale.

sur modal ouvert:

 scrollTo = $('body').scrollTop(); $('body').css("position", "fixed"); 

à la modale près

 $('body').css("position", "static"); $('body').animate({scrollTop: scrollTo}, 0); 

Je pensais que vous pourriez oublier d’append l’atsortingbut data-toggle="modal" au lien ou au bouton qui déclenche l’événement popup modal. Tout d’abord, j’ai aussi eu le même problème mais, après avoir ajouté l’atsortingbut ci-dessus, cela fonctionne bien pour moi.

Les réponses ci-dessus n’ont pas aidé alors ce que j’ai fait était:

 .modal { -webkit-overflow-scrolling: touch; } 

Mon problème particulier a été lorsque j’ai augmenté la taille modale après le chargement.

C’est un problème iOS connu, voir ici . Comme il ne brise rien, la solution ci-dessus était suffisante pour mes besoins.

Cela pourrait être un peu comme battre un cheval mort ici .. mais, ma solution actuellement mise en œuvre sur les modals DIY via vanilla JS:

Au spectacle modal:

 if (document.body.style.position !== 'fixed') { document.body.style.top = -window.scrollY + 'px'; document.body.style.position = 'fixed'; } 

Sur peau modale:

 document.body.style.position = ''; window.scrollTo(0, -parseInt(document.body.style.top, 10)); document.body.style.top = ''; 

En plus de @Karthick Kumar, répondez à partir de documents bootstrap

show est déclenché au début d’un événement

montré est déclenché à la fin d’une action

… alors ça devrait être:

 $('.modal') .on('show.bs.modal', function (){ $('body').css('overflow', 'hidden'); }) .on('hide.bs.modal', function (){ // Also if you are using multiple modals (cascade) - additional check if ($('.modal.in').length == 1) { $('body').css('overflow', 'auto'); } }); 

Hey les gars, donc je pense que j’ai trouvé un correctif. Cela fonctionne pour moi sur iPhone et Android pour le moment. C’est un mélange d’heures sur des heures de recherche, de lecture et de test. Donc, si vous voyez des parties de votre code ici, le crédit va à vous lol.

 @media only screen and (max-device-width:768px){ body.modal-open { // block scroll for mobile; // causes underlying page to jump to top; // prevents scrolling on all screens overflow: hidden; position: fixed; } } body.viewport-lg { // block scroll for desktop; // will not jump to top; // will not prevent scroll on mobile position: absolute; } body { overflow-x: hidden; overflow-y: scroll !important; } 

La raison pour laquelle le support est spécifique est sur un bureau avec lequel je rencontrais des problèmes lorsque le modal ouvrait tout le contenu de la page serait déplacé de centré à gauche. Ressemblait à de la merde. Cela concerne donc les périphériques de taille de tablette où vous devrez faire défiler. Il y a encore un léger décalage sur le mobile et la tablette mais ce n’est vraiment pas beaucoup. Faites-moi savoir si cela fonctionne pour vous les gars. Espérons que cela met le clou dans le cercueil

J’ai trouvé une solution simple javascript / jquery qui utilise les événements modaux bootstrap.

Ma solution corrige également le problème de la position:fixed où la page d’arrière-plan revient au début au lieu de restr en place lorsque la fenêtre modale est ouverte / fermée.

Voir les détails ici

Je sais que cela a été répondu, mais aucune de ces solutions n’a fonctionné pour moi. Je devais adopter une approche différente. J’utilise PhoneGap et je comstack mon code en mode natif, je devais donc déplacer l’arrière-plan dans le corps. J’espère que ça aidera quelqu’un d’autre. Ou s’il existe un moyen plus propre de faire cela, n’hésitez pas à commenter …

 $(document).on('shown.bs.modal', '.modal', function (e) { $("#" + e.target.id).find(".modal-backdrop").css("z-index", $("#" + e.target.id).css("z-index")).insertBefore("#" + e.target.id); }); 

Utilisation de la position:fixed a pour effet secondaire de faire défiler le corps vers le haut.

Si vous ne faites pas défiler votre corps vers le haut, utilisez la position:fixed DO NOTE position:fixed . Désactivez simplement le toucher du corps si le modal est ouvert. Remarque: Le modal lui-même est toujours capable de défiler au toucher (s’il est plus grand que l’écran).

CSS:

 body.modal-open { overflow: hidden; width: 100%; /* NO position:fixed here*/ } 

JS:

 $('.modal').on('show.bs.modal', function (ev) { // prevent body from scrolling when modal opens $('body').bind('touchmove', function(e){ if (!$(e.target).parents().hasClass( '.modal' )){ //only prevent touch move if it is not the modal e.preventDefault() } }) }) $('.modal').on('hide.bs.modal', function (e) { //unbind the touchmove ressortingctions from body when modal closes $('body').unbind('touchmove'); }) 

EDIT: Notez que pour de très petits modaux, vous devrez peut-être append la ligne suivante à votre CSS:

 .modal-dialog{ height: 100%; }