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

Question

J'utilise la boîte de dialogue de l'interface utilisateur jQuery avec modal = true . Dans Chrome et Safari, cela désactive le défilement à l'aide de la barre de défilement et des touches du curseur (le défilement à l'aide de la molette de la souris et de la page vers le haut / bas fonctionne toujours).

Cela pose 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 à propos du gestionnaire de bogues jQuery - http://dev.jqueryui.com/ ticket / 4671 - il ne semble pas que le corriger soit une priorité. :)

Quelqu'un fait-il:

1. avez-vous une solution à cela?
2. avez-vous une solution de contournement qui donnerait une expérience de convivialité décente?

J'expérimente mouseover / scrollto sur des bits du formulaire, mais ce n'est pas une bonne solution: (

MODIFIER: des compliments à 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 pourrait lier ce genre de choses pourrait permettre.

Answer 1

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 judicieux de repenser votre conception. Cependant, je peux faire une suggestion.

Pourriez-vous placer 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.

Answer 2

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.

Answer 3

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 souhaiterais savoir pourquoi ces événements de souris et de mouseup ont lieu en premier lieu.

J'ai essayé la solution fournie par alexis.kennedy et elle fonctionne sans problème, sans rien casser que je puisse voir dans aucun navigateur.

Answer 4

Je résous cette situation en désactivant le mode modal 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();      
    });

    //...
}

Answer 5

Je pense qu'avoir des dialogues trop volumineux va à l'encontre de votre exigence de "bonne expérience d'utilisation". 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 où 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 ; espérons que vous les trouverez utiles:

• Essayez une structure 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 d'élargir votre 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 les onglets . 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.

Answer 6

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

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

A travaillé comme un charme dans mon cas.

Answer 7

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

Answer 8

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

Answer 9

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))
});