Problema de la barra de desplazamiento con el diálogo de jQuery UI en Chrome y Safari

Question

Estoy usando el cuadro de diálogo de jQuery UI con modal = true . En Chrome y Safari, esto deshabilita el desplazamiento a través de la barra de desplazamiento y las teclas del cursor (el desplazamiento con la rueda del mouse y la página arriba / abajo todavía funciona).

Este es un problema si el diálogo es demasiado alto para caber en una página: los usuarios en una computadora portátil se sienten frustrados.

Alguien lo mencionó hace tres meses en el rastreador de errores jQuery - http://dev.jqueryui.com/ ticket / 4671 - no parece que arreglarlo sea una prioridad. :)

Alguien también:

1. ¿Tiene una solución para esto?
2. ¿Tiene una solución sugerida que ofrezca una experiencia de uso decente?

Estoy experimentando con el mouseover / scrollto en los bits del formulario, pero no es una gran solución :(

EDITAR: apoyos a Rowan Beentje (que no está en tan afaict) por encontrar una solución a esto. La interfaz de usuario de jQuery evita el desplazamiento al capturar los eventos mouseup / mousedown. Entonces el código de abajo parece arreglarlo:

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

Utilice bajo su propio riesgo, no sé qué otro comportamiento no modal que no permita esto, podría permitir.

Answer 1

Estoy de acuerdo con los pósters anteriores en que si el diálogo no funciona para usted, puede ser bueno repensar su diseño. Sin embargo, puedo ofrecer una sugerencia.

¿Podrías poner el contenido del diálogo dentro de un div desplazable? De esa manera, en lugar de que toda la página necesite desplazarse, solo el contenido dentro de la div deberá desplazarse. Esta solución también debería ser bastante fácil de lograr.

Answer 2

Puede usar este código: jquery.ui.dial .js

Me solucionó el problema. Espero que esta sea la solución que estás buscando.

Answer 3

Aunque estoy de acuerdo con la gente de la parte de no hacer un diálogo que sea más grande que la ventana gráfica, creo que hay casos en los que puede ser necesario desplazarse. Un diálogo puede verse muy bien en una resolución mayor a 1024 x 768, pero cualquier cosa menos se ve crujida. O diga, por ejemplo, que nunca quiere que aparezca un diálogo sobre el encabezado de su sitio. En mi caso, tengo anuncios que ocasionalmente tienen problemas con el índice z de flash, por lo que nunca quiero que aparezcan diálogos por encima de ellos. Finalmente, es malo en general eliminar cualquier tipo de control común, como desplazarse, alejarse del usuario. Este es un problema aparte de cuán grande es el diálogo.

Me interesaría saber por qué los eventos de mouseup y mouseup están ahí en primer lugar.

Probé la solución que proporcionó alexis.kennedy y funciona sin romper nada que pueda ver en cualquier navegador.

Answer 4

Resuelvo esta situación deshabilitando el modo de diálogo modal y mostrando la superposición manualmente:

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

Creo que tener diálogos demasiado grandes va en contra de su requisito de 'experiencia de uso decente'. Incluso si no tuvieras que tener una solución alternativa debido al error del jQuery UI Dialog, me libraría de diálogos tan grandes. De todos modos, entiendo que puede haber algunos casos 'extremos' en los que necesitas adaptarte, así que ...

Dicho esto, sin duda ayudaría si adjuntara una captura de pantalla: está haciendo una pregunta sobre un diseño, pero no podemos verlo. Pero entiendo que es posible que no pueda / no esté dispuesto a mostrar su contenido, así que está bien. Estas son mis ciegas conjeturas; Espero que los encuentres útiles:

• Pruebe un diseño diferente para su cuadro de diálogo. Si haces esto, hazlo para todos los diálogos, no solo para los que tienes problemas (a los usuarios no les gusta aprender muchas interfaces de usuario diferentes).
• Si no puede encontrar un diseño diferente, intente ampliar el cuadro de diálogo primero. Si tiene muchas opciones para elegir, puede encontrar una buena solución al dividirlas en dos columnas.
• Sabiendo que ya estás usando la interfaz de usuario jQuery, intenta usar las pestañas . Si tiene demasiadas opciones, un panel con pestañas suele ser una buena solución: los usuarios están "acostumbrados" a ese widget.
• Habló sobre 'elementos' en el diálogo, pero no sabemos qué es un elemento. ¿Es posible mostrarlos de forma "resumida", como una pequeña lista a la izquierda y una vista ampliada a la derecha al hacer clic en ellos? Por ejemplo, al tener una lista con los títulos de los elementos a la izquierda, y al hacer clic en ellos, aparece la pantalla completa a la derecha.

Sin poder ver el diseño, supongo que eso es todo lo que puedo hacer.

Answer 6

Hay una solución que desvincula el evento enlazado. Esto agrega lo siguiente en el evento abierto del diálogo:

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

Esto funciona ... pero esto es feo

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

Funcionó como un encanto en mi caso.

Answer 7

Este es un error que se ha corregido desde entonces: http://bugs.jqueryui.com/ticket/4671

Answer 8

¿Intentaste mi extensión al diálogo? http://plugins.jquery.com/project/jquery-framedialog

Answer 9

Usa el código de abajo. Funcionará 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))
});