2012-01-20 13 views
7

Como se puede ver en este enlace, http://jsbin.com/ozapol/9,diálogos modales Jquery deshabilitar la barra de desplazamiento

Jquery desactiva las barras de desplazamiento en algunas versiones de IE y la última versión de Chrome. (aún no lo he probado ...)

¿Hay alguna manera de mantener las barras de desplazamiento habilitadas para poder desplazarse por un cuadro de diálogo largo?

¡Gracias! adiós

Niza solución para Internet Explorer (Gracias a JK.)

html {overflow-y : scroll} 

solución Brutal para Chrome (Gracias a JK.)

En Chrome, jQueryUI secuestra los eventos del ratón sobre las barras de desplazamiento. Esto parece un error al que se hace referencia en los enlaces de arriba. Con el fin de eliminar los atascamientos, usted tiene que desvincular eventos cada vez que se crea un diálogo modal:

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

No es el último ejemplo: http://jsbin.com/ujagov/2

Enlaces a informes de errores:

  1. http://bugs.jqueryui.com/ticket/4671
  2. http://wiki.jqueryui.com/w/page/34725121/Visual-Test-Page-Cleanup
+0

¿Por qué no trate de añadir una barra de desplazamiento dentro del diálogo? – epignosisx

+0

Porque esto no tiene sentido en mi aplicación ...Lo siento –

+0

posible duplicado de [Problema de la barra de desplazamiento con el diálogo de la interfaz de usuario jQuery en Chrome y Safari] (http://stackoverflow.com/questions/1617638/scrollbar-problem-with-jquery-ui-dialog-in-chrome-and-safari) – daniloquio

Respuesta

5

Puede mantener las barras de desplazamiento habilitados con:

html {overflow-y: scroll;} 

Se podría añadir que el CSS mediante programación por lo que no afecta a todas las páginas del sitio y, posiblemente, el diseño.

Y, puede que tenga que desvincular los eventos de ratón que el diálogo modal secuestra:

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

Ver Scrollbar problem with jQuery UI dialog in Chrome and Safari

+0

Hola, gracias por su respuesta, pero desafortunadamente esto no parece funcionar. Agregué esta parte de CSS en mi muestra y todavía no funciona: http://jsbin.com/ozapol/5 –

+0

En realidad, funciona en Internet Explorer pero no en Chrome ... ¿Alguna idea? –

+0

@NicolasThery Funciona para mí en Chrome en Mac y PC. No estoy seguro de por qué no está funcionando para usted. –

0

Agregar siguiente código a su css-archivo:

.ui-dialog .ui-dialog-content { 
    overflow-y: scroll; 

} 
#longdialog{ 
    height: 450px; 

} 

El el desbordamiento no funciona porque la altura se estableció en auto, defina una altura específica en el contenedor div

+0

Lo siento, pero no quiero la barra de desplazamiento dentro del cuadro de diálogo, pero para toda la página. No quiero muchas barras de desplazamiento en mi interfaz. Actualicé el ejemplo: http: //jsbin.com/ozapol/9 –

Cuestiones relacionadas