Empêcher le défilement de la page si la pop-up est ouvert

Je suis à l'aide de jquery mobile pop-up. C'est à l'intérieur de la page. Il y a une image qui s'ouvre cette fenêtre pop-up. Maintenant, comment puis je éviter que l'ensemble de la page de défilement uniquement si la fenêtre est ouverte et permettre le défilement si la fenêtre est fermée?

    <a href="#settingsPopUp" data-rel="popup" data-position-to="window" data-inline="true" data-icon="gear"><img src="settings1.jpg" alt="Settings"></a>

    <br>
    <div data-role="popup" id="settingsPopUp" data-theme="a" class="ui-corner-all">
        <div style="padding:10px 20px;">
            <h3>Location Details</h3>               
        </div>          
    </div>

OriginalL'auteur Pramod Setlur | 2013-03-11

  1. 6

    J'ai mélangé à Lefois's solution et Simona Adriani's solution. Il travaille pour moi dans le navigateur et le téléphone mobile WebView (PhoneGap + jquerymobile).

    $(document).on('popupafteropen', '[data-role="popup"]', function(event, ui) {
    $('body').css('overflow', 'hidden').on('touchmove', function(e) {
         e.preventDefault();
    });
}).on('popupafterclose', '[data-role="popup"]', function(event, ui) {
    $('body').css('overflow', 'auto').off('touchmove');
});
    C'est la réponse parfaite et doit être accepté. Je suis en utilisant le même et cela fonctionne bien sur tous les navigateurs sur ordinateur de bureau et les appareils mobiles.
    Cela ne fonctionne pas si vous voulez toujours être en mesure de faire défiler dans la boîte de dialogue modale.

    OriginalL'auteur oriolparra

  2. 4

    Pour moi, cette méthode ne fonctionne pas, il fonctionne sur le navigateur, mais pas dans le Téléphone Écart de l'application. J'ai donc le résoudre de cette façon:

    $('#Popup-id').on({
   popupbeforeposition: function(){
      $('body').on('touchmove', false);
   },
   popupafterclose: function(){
      $('body').off('touchmove'); 
  }
});

    Espère que cela aide!

    Il fonctionne pour moi! Merci. J'utilise popupafteropenet popupaftercloseévénements.

    OriginalL'auteur Simona Adriani

  3. 2

    Que sur l'affectation de overflow-y: hidden; à l'élément que vous ne voulez pas de défilement, lors de la modal box est ouvert? (habituellement, il sera <body>)

    OriginalL'auteur Terry

  4. 1

    Je ne peux pas commenter sur la réponse précédente, mais il y a une petite erreur. Morceau de code suivant fait le tour pour moi:

    $( "#mypopup" ).popup({
  afteropen: function( e) {
   $('body').css('overflow','hidden');
  },
  afterclose: function(e) {
   $('body').css('overflow','auto');
  }
});

    OriginalL'auteur Lefois

  5. 0

    Il y a deux façons:

    1. Either "overflow:hidden" the body
    2. Or give a "position:fixed" to the popup so this will scroll in the viewport.
    le style rend le pop-up ouvert dans le coin inférieur droit de se faire laid. Et il est en fait un menu déroulant (que je n'ai pas le coller dans le code), il est maintenant de ne pas arriver peuplée.

    OriginalL'auteur Jai

  6. 0

    vous pouvez utiliser les événements pour le pop up widget

    $( "#settingsPopUp" ).popup({
  afteropen: function( event, ui ) {
   $('body').css({
       overflow:'hidden'
   });
  },
  afterclose: function( event, ui ) {
   $('body').css({
       overflow:'auto'
   });
  }
});

    Je pense que c'est une solution dynamique, et il prendra soin de votre problème.

    Il n'est pas de travail. 🙁

    OriginalL'auteur misoukrane