web-dev-qa-db-fra.com

désactiver le défilement du navigateur lorsque la boîte de dialogue modale de l'interface utilisateur jQuery est ouverte

est-il possible de désactiver le défilement dans le navigateur (uniquement pour les barres de défilement du navigateur) tant qu'une boîte de dialogue modale de l'interface utilisateur jQuery est ouverte.

Remarque: je souhaite que le défilement soit activé dans la boîte de dialogue.

jqueryjquery-ui
49
Omu

Vous ne pouvez pas désactiver complètement le défilement, mais vous pouvez arrêter le défilement avec la molette de la souris et les boutons qui effectuent généralement le défilement.

Regardez cette réponse pour comprendre comment cela se fait. Vous pouvez appeler ces fonctions sur le create event et tout remettre à la normale, on close .

5
JasCav
$(formObject).dialog({
 create: function(event, ui) {
  $("body").css({ overflow: 'hidden' })
 },
 beforeClose: function(event, ui) {
  $("body").css({ overflow: 'inherit' })
 }
});

Ou comme je le mentionne dans le commentaire ci-dessous: 

var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";

$(formObject).dialog({
 create: function(event, ui) {
   $(dialogContainerSelector).addClass(dialogActiveClassName);
 },
 beforeClose: function(event, ui) {
   $(dialogContainerSelector).removeClass(dialogActiveClassName);
 }
});

Mais en réalité, pour être honnête, vous devez vous assurer que la création d’une boîte de dialogue crée un événement jusqu’à votre objet window où vous observeriez ces événements, ce qui correspond à peu près à ce pseudo: 

var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";
$(window).on("event:dialog-opened", function(){
    $(dialogContainerSelector).addClass(dialogActiveClassName);
});
$(window).on("event:dialog-closed", function(){
    $(dialogContainerSelector).removeClass(dialogActiveClassName);
});
68
airtonix

Je devais faire exactement la même chose, faites-le simplement en ajoutant une classe au corps:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

Ajoutez la classe, puis supprimez-la lorsque vous souhaitez réactiver le défilement, testé dans IE, FF, Safari et Chrome. 

$('body').addClass('stop-scrolling')
47
hallodom

Référence de corbeille JS pour débordement de CSS

Ajoutez simplement

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

à votre fonction que affiche le modal .

Et

$('body').css('overflow','scroll');

à votre fonction qui ferme le modal.

26
Naveen Kumar Alonekar

Voici le meilleur que j'ai pu trouver pour résoudre ce problème (j'avais le même problème) en utilisant les fonctions référencées dans la réponse de JasCav ci-dessus ( ces fonctions ):

dialogClass: 'dialog_fixed',
create: function(event, ui) {
    disable_scroll(); // disable while dialog is visible
    $('#dialog_form').hover(
        function() { enable_scroll(); }, // mouse over dialog
        function() { disable_scroll(); } // mouse not over dialog
    );
},
beforeClose: function(event, ui) {
    enable_scroll(); // re-enable when dialog is closed
},

le css est:

.dialog_fixed { position:fixed !important; }

et il ne fait que maintenir le dialogue fixé sur la page, ce dont nous n'avons peut-être plus besoin.

Cela permet de faire défiler la souris lorsque la souris est au-dessus de la boîte de dialogue, mais pas lorsqu'elle se trouve hors de la boîte de dialogue. Malheureusement, il continuera à faire défiler la page principale lorsque la souris survolera la boîte de dialogue et au-delà de la fin du contenu de celle-ci (immédiatement après dans IE, dans Safari et Firefox). J'aimerais savoir comment résoudre ce problème.

J'ai testé cela dans Safari 5.1.5, Firefox 12 et IE 9.

7
Craig Nakamoto

Arrête le défilement , ajuste la position de la boîte de dialogue et renvoie l'utilisateur à une partie de la page affichée après la fermeture de la boîte de dialogue

$('<div/>').dialog({
    open : function(event, ui) { 
        $('html').attr('data-scrollTop', $(document).scrollTop()).css('overflow', 'hidden');
        $(this).dialog('option','position',{ my: 'center', at: 'center', of: window });
    },
    close : function(event, ui) { 
        var scrollTop = $('html').css('overflow', 'auto').attr('data-scrollTop') || 0;
        if( scrollTop ) $('html').scrollTop( scrollTop ).attr('data-scrollTop','');
    }
});
5
oLinkWebDevelopment

Ancien post mais comme je l'ai fait:

open: function(event, ui) {                
     $('html').css('overflow', 'hidden');
     $('.ui-widget-overlay').width($(".ui-widget-overlay").width() + 18);
     },
close: function(event, ui) {
     $('html').css('overflow', 'hidden');
}

Cela semble fonctionner assez bien

2
hcharge

Recherché depuis très longtemps. Enfin, le lien suivant me sauve. J'espère que c'est utile pour les autres.

Il utilise un conteneur pour le corps principal. Le dialogue de défilement n'affectera pas le conteneur d'arrière-plan.

http://coding.abel.nu/2013/02/prevent-page-behind-jquery-ui-dialog-from-scrolling/

2
horizon1711

essaye celui-là. il est utilisé par http://jqueryui.com lui-même

html { overflow-y: scroll; }

1
Izzati Iyeyo

Créez cette classe css:

.stop-scrolling {
    overflow:hidden;
    height: 100%;
    left: 0;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    width: 100%;
}

Ajoutez ensuite ceci à votre boîte de dialogue init:

$("#foo").dialog({
    open: function () {
        $('body').addClass('stop-scrolling');
    },
    close: function () {
        $('body').removeClass('stop-scrolling');
    },
    // other options
});

Si vous utilisez déjà open: and close: pour appeler d'autres fonctions, ajoutez simplement les lignes addClass et removeClass à l'emplacement approprié. 

1
Kirk Ross

create: event Fait disparaître les barres de défilement lors du premier chargement de la page Je la change avec open: et je travaille maintenant comme un charme

1
Otto Kanellis
$(settings.dialogContentselector).dialog({
        autoOpen: false,
        modal: true,
        open: function( event, ui ) {
            $("html").css({ overflow: 'hidden' });
            $("body").css({ overflow: 'hidden' });
        },
        beforeClose: function( event, ui ) {
            $("html").css({ overflow: 'auto' });
            $("body").css({ overflow: 'auto' });
        }
    });
1
user33560

Une meilleure solution en évitant les sauts de corps lorsque la fenêtre contextuelle est fermée:

$(document).ready(function(){
  var targetNodes         = $(".cg-popup");
  var MutationObserver    = window.MutationObserver || window.WebKitMutationObserver;
  var myObserver          = new MutationObserver (mutationHandler);
  var obsConfig           = { attributes : true, attributeFilter : ['style'] };
  // ADD A TARGET NODE TO THE OBESERVER. CAN ONLY ADD ONE NODE AT TIME
  targetNodes.each ( function () {
      myObserver.observe (this, obsConfig);
  } );
  function mutationHandler (mutationRecords) {
    var activate_scroll = true;
    $(".cg-popup").each(function( index ) {
      if($(this).css("display") != "none"){
        $('html, body').css({'overflow-y': 'hidden', 'height': '100%'});
        activate_scroll = false;
        return;
      }
    });
    if(activate_scroll){
      $('html, body').css({'overflow-y': 'auto', 'height': 'auto'});
    }
  }
});
0
Gricel Dayhanna Seplveda Rozas