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

Question

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

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

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

también lo hace nadie:

1. tienen una solución para esto?
2. tienen una solución sugerida que daría una experiencia de usabilidad decente?

estoy experimentando con mouseover/scrollTo en trozos de la forma, pero no es una gran solución :(

EDIT: apoyos a Rowan Beentje (que no está en SO afaict) para encontrar una . solución a este jQuery UI impide el desplazamiento por la captura de los eventos mouseup/mousedown Así que el código de abajo parece solucionarlo:.

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

uso bajo su propio riesgo, no sé qué otros comportamientos unmodal compromiso.Por esto podría permitir.

Answer 1

Estoy de acuerdo con los carteles 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ía 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 del div debería desplazarse. Esta solución también debería ser bastante fácil de lograr.

Answer 2

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

Dicho esto, sin duda sería útil adjuntar alguna captura de pantalla, estás haciendo una pregunta sobre un diseño , pero no podemos verlo Pero entiendo que es posible que no pueda/quiera mostrar el contenido, así que está bien. Estas son mis ciegas conjeturas; Esperamos que sean de utilidad:

• Pruebe un diseño diferente para su diálogo. Si haces esto, hazlo para todos los cuadros de diálogo, no solo para aquellos con los que tienes problemas (a los usuarios no les gusta aprender muchas UI diferentes).
• Si no puede encontrar un diseño diferente, intente ampliando primero su cuadro de diálogo. SI tiene muchas opciones para elegir, puede encontrar una buena solución dividiéndolas en dos columnas.
• Sabiendo que ya está usando jQuery UI, intente con pestañas. Si tiene demasiadas opciones, un panel con pestañas suele ser una buena solución: los usuarios son 'utilizados' para ese widget.
• Ha hablado de 'elementos' en el cuadro de diálogo, pero no sabemos qué es un elemento. ¿Es posible mostrarlos de una manera "resumida", como una pequeña lista a la izquierda y una vista ampliada a la derecha cuando hace clic en ellos? Por ejemplo, tener una lista con los títulos de los artículos a la izquierda, y cuando hace clic en ellos, obtiene la visualización completa a la derecha.

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

Answer 3

Aunque estoy de acuerdo con la gente que no hace un cuadro de diálogo que es más grande que la ventana gráfica, creo que hay casos en que puede ser necesario el desplazamiento. Un diálogo puede verse muy bien en una resolución mayor a 1024 x 768, pero cualquier cosa menos se ve arrugada. O digamos, por ejemplo, que nunca desea que aparezca un cuadro de diálogo en el encabezado de su sitio. En mi caso, tengo anuncios que ocasionalmente tienen problemas con el índice flash z, por lo que nunca quiero que se muestren cuadros de diálogo sobre ellos. Finalmente, es malo en general quitar cualquier tipo de control común, como el desplazamiento, lejos del usuario. Este es un problema separado de cuán grande es el diálogo.

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

Intenté con la solución que proporcionó alexis.kennedy y funciona sin interrumpir nada de lo que puedo ver en cualquier navegador.

Answer 4

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

Answer 5

I Solución alternativa a esta situación por superposición desactivar el modo de diálogo modal y mostrando de forma manual:

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 6

Usted puede utilizar este código: jquery.ui.dialog.patch.js

Se resolvió el problema para mí. Espero que esta es la solución que estás buscando.

Answer 7

Hay una solución que desenlaza el evento vinculado. Esto añade lo siguiente a la intemperie: caso del cuadro de 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

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

funcionó como un encanto en mi caso.

Answer 8

Este es un error que ha sido puesto fijo: http://bugs.jqueryui.com/ticket/4671

Answer 9

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