désactiver le défilement du navigateur lorsque la boîte de dialogue modale de jQuery UI est ouverte

Question

Est-il possible de désactiver le défilement dans le navigateur (uniquement pour les barres de défilement du navigateur) lorsqu'un dialogue modal jQuery UI est ouvert ?

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

Answer 1

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

Ou comme je le dis 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 fait, pour être honnête, vous devriez vous assurer que la création d'un dialogue fait bouillonner un événement jusqu'à votre objet fenêtre où vous surveillez lesdits événements, en gros quelque chose comme 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);
});

Answer 2

J'avais besoin de faire exactement la même chose, de le faire simplement en ajoutant une classe au corps :

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

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

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

Answer 3

Référence JS Bin pour le débordement CSS

Ajouter simplement

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

à votre fonction que montre la modalité .

Et

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

à votre fonction que ferme la modale.

Answer 4

Voici ce que j'ai pu trouver de mieux pour résoudre ce problème (j'ai eu 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 cela permet de garder le dialogue fixé sur la page, ce dont nous n'avons peut-être plus besoin.

Cela permet le défilement de la souris lorsque celle-ci se trouve au-dessus de la boîte de dialogue, mais pas lorsqu'elle se trouve en dehors de celle-ci. Malheureusement, la page principale continue de défiler lorsque la souris se trouve au-dessus de la boîte de dialogue et que vous dépassez la fin du contenu à l'intérieur de la boîte de dialogue (dans IE immédiatement, dans Safari et Firefox après un court délai). J'aimerais bien savoir comment résoudre ce problème.

Je l'ai testé dans Safari 5.1.5, Firefox 12 et IE 9.

Answer 5

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.

Jetez un coup d'œil à cette réponse pour comprendre comment cela se passe. Vous pouvez appeler ces fonctions sur le créer un événement et tout revenir à la normale, sur fermer .