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

Question

Je suis à l'aide de l'INTERFACE utilisateur de jQuery dialogue 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 de la page haut/bas marche toujours).

C'est un problème si le dialogue est trop grande pour tenir sur une seule page - utilisateurs sur un ordinateur portable frustré.

Quelqu'un a soulevé cette il y a trois mois sur le jQuery bug tracker - http://dev.jqueryui.com/ticket/4671 - il ne ressemble pas à la fixation, elle est une priorité. :)

Donc quelqu'un:

1. a un correctif pour cela?
2. avoir une solution de contournement proposée qui permettrait de donner une vie décente de la convivialité de l'expérience?

Je suis en train d'expérimenter avec la souris / scrollto sur les bits de la forme, mais c'est pas une super solution :(

EDIT : accessoires pour Rowan Beentje (qui n'est pas sur DONC afaict) pour trouver une solution à cette question. jQuery UI empêche de défilement par la capture de la mouseup / les événements mousedown. Donc le code ci-dessous semble résoudre le problème:

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

Utilisez à votre propre risque, je ne sais pas ce que les autres unmodal comportement déliaison ce genre de choses peut permettre.

Answer 1

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 2

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.

Answer 3

Alors que je suis d'accord, les gens dans le parti de ne pas avoir un dialogue qui est plus grand que la fenêtre d'affichage, je pense qu'il y a des cas où le défilement peut être nécessaire. Une boîte de dialogue peut être très bon dans une résolution supérieure à la résolution de 1024 x 768, mais rien de moins semble écrasé. Ou de dire, par exemple, vous ne voulez jamais une boîte de dialogue pour afficher plus de l'en-tête de votre site. Dans mon cas, j'ai des publicités qui de temps en temps flash z-index de problèmes, donc je ne veux plus jamais les boîtes de dialogue pour afficher au-dessus d'eux. Enfin, il est mauvais en général pour prendre toute sorte de contrôle commun, telles que le défilement, loin de l'utilisateur. C'est un problème distinct de la taille de la boîte de dialogue est.

Je serais intéressé de savoir pourquoi la ces événements mousedown et mouseup sont là en premier lieu.

J'ai essayé la solution que alexis.kennedy fourni et il fonctionne pause sans casser quoi que ce soit que je peux voir dans n'importe quel navigateur.

Answer 4

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

    //...
}
 

Answer 5

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

Travaillé comme un charme dans mon cas.