web-dev-qa-db-fra.com

Problème de barre de défilement avec la boîte de dialogue de l'interface utilisateur jQuery dans Chrome et Safari

J'utilise la boîte de dialogue jQuery UI avec modal=true. Dans Chrome et Safari, cela désactive le défilement via la barre de défilement et les touches du curseur (le défilement avec la molette de la souris et la page vers le haut/le bas fonctionnent toujours).

C'est un problème si la boîte de dialogue est trop grande pour tenir sur une page - les utilisateurs d'un ordinateur portable sont frustrés.

Quelqu'un a soulevé cette question il y a trois mois sur le traqueur de bogues jQuery - http://dev.jqueryui.com/ticket/4671 - il ne semble pas que la correction soit une priorité. :)

Ainsi fait n'importe qui:

  1. avoir un correctif pour cela?
  2. avez-vous une solution de contournement suggérée qui donnerait une expérience de convivialité décente?

J'expérimente mouseover/scrollto sur des morceaux de la forme, mais ce n'est pas une bonne solution :(

EDIT: remerciements à Rowan Beentje (qui n'est pas sur SO afaict) pour trouver une solution à ce problème. L'interface utilisateur de jQuery empêche le défilement en capturant les événements mouseup/mousedown. Donc, le code ci-dessous semble résoudre ce problème:

$("dialogId").dialog({
    open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
    modal: true
});

À utiliser à mes risques et périls, je ne sais pas ce qu'un autre comportement non modal qui permettrait de lier ces éléments pourrait permettre.

jqueryjquery-uisafarigoogle-chrome
42
alexis.kennedy

Je suis d'accord avec les affiches précédentes en ce sens que si le dialogue ne fonctionne pas pour vous, il peut être bon de repenser votre conception. Cependant, je peux offrir une suggestion.

Pourriez-vous mettre le contenu de la boîte de dialogue dans un div à défilement? De cette façon, au lieu que toute la page ait besoin de défiler, seul le contenu de la div doit défiler. Cette solution de contournement devrait être assez facile à accomplir aussi.

7
Tim Banks

Vous pouvez utiliser ce code: jquery.ui.dialog.patch.js

Cela a résolu le problème pour moi. J'espère que c'est la solution que vous recherchez.

38
Ricardo Rodrigues

Je pallie cette situation en désactivant le mode modal de la boîte de dialogue et en affichant la superposition manuellement:

function showPopup()
{
    //...

    // actionContainer - is a DIV for dialog

    if ($.browser.safari == true)
    {
        // disable modal mode
        $("#actionContainer").dialog('option', 'modal', false);

        // show overlay div manually
        var tempDiv = $("<div id='tempOverlayDiv'></div>");
        tempDiv.css("background-color", "#000");
        tempDiv.css("opacity", "0.2");
        tempDiv.css("position", "absolute");
        tempDiv.css("left", 0);
        tempDiv.css("top", 0);
        tempDiv.css("width", $(document).width());
        tempDiv.css("height", $(document).height());
        $("body").append(tempDiv);
    }

    // remove overlay div on dialog close
    $("#actionContainer").bind('dialogclose', function(event, ui) {
        $("#tempOverlayDiv").remove();      
    });

    //...
}
2
Anton Palyok

Bien que je sois d’accord avec le fait que les membres du parti ne font pas un dialogue plus grand que la fenêtre de visualisation, je pense qu’il peut arriver que le défilement soit nécessaire. Une boîte de dialogue peut sembler très belle dans une résolution supérieure à 1024 x 768, mais tout ce qui est moins a l’air craqué. Ou, par exemple, vous ne voulez jamais qu'une boîte de dialogue apparaisse sur l'en-tête de votre site. Dans mon cas, j'ai des annonces qui ont parfois des problèmes d'index z-index, je ne veux donc jamais que les boîtes de dialogue s'affichent au-dessus d'elles. Enfin, il est mauvais en général d’enlever toute sorte de contrôle commun, tel que le défilement, à l’utilisateur. C'est un problème distinct de la taille du dialogue. 

Je serais intéressé de savoir pourquoi les événements Mousedown et Mouseup sont là en premier lieu. 

J'ai essayé la solution fournie par alexis.kennedy et elle fonctionne sans casser tout ce que je peux voir dans aucun navigateur. 

2
Adrian Adkison

Je pense qu'avoir trop de dialogues va à l'encontre de votre exigence de "bonne expérience de la convivialité". Même si vous n'aviez pas besoin d'une solution de contournement en raison du bogue jQuery UI Dialog, je me débarrasserais de ces gros dialogues. Quoi qu'il en soit, je comprends qu'il peut y avoir des cas "extrêmes" dans lesquels vous devez vous adapter, alors ...

Cela dit, il serait certainement utile d’ajouter une capture d’écran. Vous posez une question sur un dessin, mais nous ne le voyons pas. Mais je comprends que vous ne pourrez peut-être pas/ne voudriez pas en montrer le contenu, alors ça va. Ce sont mes aveugles devinons; espérons que vous les trouverez utiles:

  • Essayez une mise en page différente pour votre boîte de dialogue. Si vous faites cela, faites-le pour tous les dialogues, pas seulement ceux avec lesquels vous rencontrez des problèmes (les utilisateurs n'aiment pas apprendre de nombreuses interfaces utilisateur).
  • Si vous ne trouvez pas de présentation différente, essayez d’abord élargir la boîte de dialogue. SI vous avez le choix entre plusieurs options, vous pouvez trouver une bonne solution en les divisant en deux colonnes.
  • Sachant que vous utilisez déjà l'interface utilisateur jQuery, essayez d'utiliser tabs. Si vous avez trop d'options, un panneau à onglets est généralement une bonne solution - les utilisateurs sont «habitués» à ce widget.
  • Vous avez parlé des «éléments» dans la boîte de dialogue, mais nous ne savons pas ce qu’est un élément. Est-il possible de les afficher de manière "résumée", par exemple une petite liste à gauche et une vue agrandie à droite lorsque vous cliquez dessus? Par exemple, si vous avez une liste avec les titres des éléments à gauche et que vous cliquez dessus, vous obtenez l'affichage complet à droite.

Sans pouvoir voir le design, je suppose que c'est aussi loin que je peux aller.

1
Seb

C'est un bug qui a été corrigé depuis: http://bugs.jqueryui.com/ticket/4671

1
Jared Hales

Il existe une solution de contournement qui dissocie l'événement lié. Ceci ajoute ce qui suit dans l'événement open: de la boîte de dialogue:

$("#longdialog").dialog({
    modal:true,
    open: function (event, ui) { window.setTimeout(function () {
        jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
    }
});

Cela fonctionne ... mais c'est moche

--from https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449

Travaillé comme un charme dans mon cas.

1
linuxeasy

Utilisez le code ci-dessous. Cela fonctionnera bien.

$("dialogId").dialog({
      open: function(event, ui) {
            window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                        .unbind('mouseup.dialog-overlay');
             }, 100);
      },
      modal: true,
      safariBrowser: (function( $, undefined ) {
               if ($.ui && $.ui.dialog) {
                   $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
               }
 }(jQuery))
});
0
anand vishwakarma

Avez-vous essayé mon extension au dialogue? http://plugins.jquery.com/project/jquery-framedialog

0
Tracker1