¿Cómo cambiar el color de fondo del cuadro de diálogo de la interfaz de usuario jQuery?

Question

Estoy teniendo dificultades para descubrir cómo cambiar el color de fondo de jQuery UI Dialog.

He visto muchas referencias sobre cómo cambiar/quitar la barra de título, pero no el fondo completo , incluidas esas curvas.

Aquí es mi intento:

http://jsfiddle.net/dEvKb/11/

El problema es .ui en widgets de contenido sólo se aplica a la zona de la plaza dentro del diálogo, pero sin incluir esquina curvas.

Encontré una clase .ui-corner-all clase esperando que coloree todo el fondo, pero solo la mitad del cuadro de diálogo es de color. (Puede ver esto en el jsfiddle)

¿Alguien ha hecho esto antes?

Answer 1

puede utilizar de esta manera

http://jsfiddle.net/dEvKb/15/

Se debe ajustar a toda clase de fondo con el uso! Importante.

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}

Answer 2

Utilice las clases css:

• ui-diálogo
  • contenedor principal de toda cosa
• ui-diálogo-título
  • Aquí es donde aparece el título en realidad
• ui-diálogo-barra de título
  • Área donde título de diálogo sería si existe
• ui-Diálogo: contenido
  • área donde su div se carga realmente
• ui-tamaño variable-manejar
  • Estos divs se utilizan para cambiar el tamaño de la ventana de diálogo, pero suelen ser invisble acuerdo a su configuración
• ui-dialog-buttonpane
  • Aquí es donde irían los botones si e Xist
• ui-diálogo-buttonset
  • Aquí es donde los botones que aparecen actualmente

Además, a diferencia respuesta dada seleccionado, tomar nota, USTED NO HACE TIENE QUE UTILIZAR !important.

Si desea una llamada directa, configure todo y cree su diálogo. Cargue la página en Chrome o FF (Chrome es más fácil de leer). Luego simplemente abra el cuadro de diálogo y seleccione el elemento que desea cambiar. Mira su CSS en tu Browser's Developer Tools. Podrá ver la línea exacta que jqueryui utiliza para hacer su llamada css. Simplemente copie esa línea en su propio CSS y asegúrese de que se cargue más tarde y su cuadro de diálogo recibirá la nueva sobrescritura.

Answer 3

Utilice esta clase en el CSS

.ui-dialog .ui-dialog-content { 
    border: 0; 
    padding: .5em 1em; 
    background: #ff0000; 
    overflow: auto; 
    zoom: 1; 
} 

Answer 4

Por favor, tenga en cuenta que también se puede ir y hacer su propio CSS personalizado mediante este enlace en jQuery

jQuery nos permite hacer una custom-css. Seleccione el tema que desea de la galería y presione el botón Editar, podrá cambiar casi todo lo relacionado con el cuadro de diálogo, así como las esquinas redondeadas.

Luego tiene que descargar todo el paquete jQuery dentro de él encontrará la carpeta css/custom-css que acaba de poner en su etiqueta css y se ordenará básicamente.

Las formas anteriores también son ciertas, ya que podrás cambiarlas, pero tendrás que buscar las clases y cosas así en el CSS, así jQuery hace eso para nosotros de una manera fácil y funcionó para mí como bien, así que puedes intentarlo también.

Lo que básicamente hago es crear de dos a tres hojas de estilo personalizadas y luego cargarlas y jugar con ellas y finalmente elegir una para el sitio web y descartar el resto.

espero que esto ayude ...

Answer 5

Si desea orientar un diálogo específico que puede hacerlo de esta manera:

$('#yourDialog').dialog(
{ 
    autoOpen: false, 
    open: function(e) { 
     $(e.target).parent().css('background-color','orangered'); 
    } 
});