Problema della barra di scorrimento con la finestra di dialogo dell'interfaccia utente jQuery in Chrome e Safari

Question

Sto usando la finestra di dialogo dell'interfaccia utente jQuery con modal = true . In Chrome e Safari, questo disabilita lo scorrimento tramite la barra di scorrimento e i tasti cursore (lo scorrimento con la rotellina del mouse e la pagina su / giù funziona ancora).

Questo è un problema se la finestra di dialogo è troppo alta per adattarsi a una pagina - gli utenti su un laptop sono frustrati.

Qualcuno l'ha sollevato tre mesi fa sul tracker bug jQuery - http://dev.jqueryui.com/ ticket / 4671 - non sembra che fissarlo sia una priorità. :)

Lo stesso vale per chiunque:

1. hai una soluzione per questo?
2. hai una soluzione alternativa che darebbe un'esperienza di usabilità decente?

Sto sperimentando il passaggio del mouse / scrollto su bit del modulo, ma non è un'ottima soluzione :(

MODIFICA: propaga con Rowan Beentje (che non è a conoscenza di SO) per trovare una soluzione a questo. L'interfaccia utente di jQuery impedisce lo scorrimento acquisendo gli eventi mouseup / mousedown. Quindi il codice seguente sembra risolverlo:

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

Uso a proprio rischio, non so quali altri comportamenti immodali che non vincolano questa roba possano consentire.

Answer 1

Sono d'accordo con i precedenti poster in quanto se la finestra di dialogo non funziona per te, potrebbe essere utile ripensare il tuo design. Tuttavia, posso offrire un suggerimento.

Potresti mettere il contenuto della finestra di dialogo all'interno di un div scorrevole? In questo modo invece dell'intera pagina che deve scorrere, solo il contenuto all'interno del div dovrebbe scorrere. Anche questa soluzione alternativa dovrebbe essere abbastanza semplice da realizzare.

Answer 2

Puoi utilizzare questo codice: jquery.ui.dialog.patch .js

Mi ha risolto il problema. Spero che questa sia la soluzione che stai cercando.

Answer 3

Mentre sono d'accordo, le persone del gruppo di non fare un dialogo più grande del viewport, penso che ci siano casi in cui potrebbe essere necessario lo scorrimento. Una finestra di dialogo potrebbe avere un bell'aspetto con una risoluzione maggiore di 1024 x 768, ma qualsiasi cosa in meno sembra sgretolata. Oppure, ad esempio, dire che non si desidera mai che venga visualizzata una finestra di dialogo sopra l'intestazione del sito. Nel mio caso ho annunci che occasionalmente hanno problemi di z-index flash, quindi non voglio mai che le finestre di dialogo vengano visualizzate sopra di loro. Infine, in generale è male eliminare qualsiasi tipo di controllo comune, come lo scorrimento, lontano dall'utente. Questo è un problema separato da quanto è grande la finestra di dialogo.

Sarei interessato a sapere perché gli eventi di mouse e mouse sono presenti in primo luogo.

Ho provato la soluzione fornita da alexis.kennedy e funziona senza rompere nulla che io possa vedere in qualsiasi browser.

Answer 4

Risolvo questa situazione disabilitando la modalità modale della finestra di dialogo e mostrando manualmente l'overlay:

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

Credo che avere dialoghi troppo grandi sia contro il requisito della "decente esperienza di usabilità". Anche se non dovessi avere una soluzione alternativa a causa del bug della finestra di dialogo dell'interfaccia utente jQuery, mi sbarazzerei di dialoghi così grandi. Ad ogni modo, capisco che potrebbero esserci alcuni casi "estremi" in cui è necessario adattarsi, quindi ...

Detto questo, sarebbe sicuramente utile se hai allegato uno screenshot: stai ponendo una domanda su un design, ma non possiamo vederlo. Ma capisco che potresti non essere in grado / disposto a mostrarne il contenuto, quindi va bene. Queste sono le mie ipotesi cieche ; spero che li trovi utili:

• Prova un layout diverso per la tua finestra di dialogo. Se lo fai, fallo per tutte le finestre di dialogo, non solo per quelle con cui hai problemi (agli utenti non piace imparare molte diverse interfacce utente).
• Se non riesci a trovare un layout diverso, prova prima a allargare la finestra di dialogo . SE hai molte opzioni tra cui scegliere, potresti trovare una buona soluzione dividendole in due colonne.
• Sapendo che stai già utilizzando l'interfaccia utente di jQuery, prova a utilizzare le schede . Se hai troppe opzioni, un pannello a schede è di solito una buona soluzione: gli utenti sono "abituati" a quel widget.
• Hai parlato di "elementi" nella finestra di dialogo, ma non sappiamo cosa sia un elemento. È possibile mostrarli in modo "riassunto" come un piccolo elenco a sinistra e una vista espansa a destra quando si fa clic su di essi? Ad esempio, avere un elenco con i titoli degli elementi a sinistra e quando fai clic su di essi otterrai la visualizzazione completa a destra.

Senza essere in grado di vedere il design, immagino che sia il più lontano possibile.

Answer 6

Esiste una soluzione alternativa che separa l'evento associato. Ciò aggiunge quanto segue nell'evento open: della finestra di dialogo:

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

Funziona ... ma è brutto

--from https://github.com/jquery/jquery -ui / tirare / 230 # issuecomment-3.630.449

Ha funzionato come un incantesimo nel mio caso.

Answer 7

Questo è un bug che è stato corretto da allora: http://bugs.jqueryui.com/ticket/4671

Answer 8

Hai provato la mia estensione alla finestra di dialogo? http://plugins.jquery.com/project/jquery-framedialog

Answer 9

Usa il codice qui sotto. Funzionerà benissimo.

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