2010-07-08 21 views
12

Tengo este cuadro de diálogo jQuery UI modal extremadamente básico que escribí para probar here. A menos que me falta algo, no puedo entender por qué es esa franja gris en el medio de la página. Estoy tratando de manipular el color de fondo modal y la opacidad, como también se ve en el marcado de CSS.jQuery UI Modal Dialog Stripe Número

+0

Cómo se controla la secuencia de comandos que se inserta en la parte inferior de la página, fuera del ' '? –

Respuesta

28

El problema es que el fondo definido por jQuery UI no es sólo una color sólido: es una imagen (para soportar patrones como rayas en la superposición). Cuando personaliza un tema de jQuery UI con el programador, genera esa imagen coloreada para usted. Para solucionar su página, todo lo que tiene que hacer es editar el CSS en línea en su página en la línea 48 desde:

background-color: #000; 

a:

background: #000; 

Esto anulará toda la especificación de fondo, no sólo el color.

ACTUALIZACIÓN: Nick Craver proporcionó una demostración de la solución al http://jsfiddle.net/QVXah/

+4

+1 - Estaba a punto de publicar esto, de hecho este es el problema, aquí hay una demostración con la solución que desea incluir en su respuesta: http://jsfiddle.net/QVXah/ –

+0

¡Es un sitio realmente útil! Voy a tratar de recordar usar eso la próxima vez. – sunetos

+0

Creo que es mejor si completa la respuesta ... Quiero decir, ¿dónde aplicaría ese 'fondo: # 000;'? sólo para el paso por los lectores :) – Reigel

0

He visto ese problema antes, y no estoy seguro de por qué no se ha solucionado. Usted debe ser capaz de solucionarlo mediante la eliminación de la línea ~ 285 de jquery-ui.css de

.ui-widget-overlay { 
    url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA 
    ... 
    } 

ver si funciona para usted

+1

Solo un aviso, fíjate dónde se encuentra alojado ese archivo ... puede que no sea una opción :) –

+0

eh, heh, ¿alojas el archivo tú mismo entonces? –

+0

Tengo este problema en algunos sitios.Mi solución para esto (y otras cuestiones) es cargar mi CSS después de jquery desde //ajax.googleapis.com y anular algunos de los estilos. De esa forma puedo cargar desde google apis pero corregir esto ... –

14

Esta pregunta es más de 3 años de edad, y el problema aún persiste en jQuery.

Lo que funcionó para mí fue Sustitución de la clase CSS jQuery que define el fondo, mediante la adición de esto en mi propio archivo CSS

.ui-widget-overlay { 
    background: #000; 
} 

y cargar mi CSS CSS después de la carga jQuery. Ahora no veo este estípite molesto y obtengo un bonito fondo gris claro transparente.

También se puede establecer

background: none; 

Pero esto hará que sea confuso para el usuario, ya que el fondo seguirá siendo visible, pero no funcional.

+0

Estoy cargando desde CDN, por lo que cambiar el archivo no era una opción . Esto funcionó muy bien! – Scottie

1

Mi solución fue un poco diferente. En lugar de cambiar el color del fondo, acabo de hacer transparente:

.ui-widget-overlay { 
    opacity: 0; 
} 

Al igual que con otras soluciones similares, puse esto en un archivo .css que se carga después de la jquery-ui.css que se carga desde code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css.

Lo que veo ahora es solo la ventana emergente, sin efectos secundarios de fondo.

0

Si está utilizando un CDN y no quiere cargar/mantener otra CSS, utilice la importancia de anulación:

.ui-widget-overlay {background: #BEBEBE !important;} 
Cuestiones relacionadas