tema y estilo de diálogo jQuery

¿Cómo cambio el color de fondo de la barra de título de un cuadro de diálogo de jQuery?tema y estilo de diálogo jQuery

He mirado el themeroller pero parece que no funciona para mí.

Gracias

2009-03-31 Picflight

Depende del complemento que use para mostrar dicho diálogo (no hay ningún cuadro de diálogo en jQuery). –

lo hago de esta manera (agregando estilo "Estado-ui-error" de cabecera):

<script type="text/javascript"> 
      $(function() { 
       $("#msg").dialog({ 
        open: function() { 
         $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error"); 
        } 

       }); 

      }); 
     </script>

Fuente

2009-12-02 14:17:29 DonSleza4e

No lo cambie con javascript. Use CSS –

Hay clases asociados con cada elemento en el diálogo.

Use Firebug para inspeccionar los elementos y use CSS para darles estilo. Por ejemplo, la barra de título tiene la clase "ui-dialog-titlebar".

(esto supone que está utilizando la interfaz de usuario de diálogo jQuery)

Fuente

2009-03-31 18:54:23 jonstjohn

Usted puede cambiar modificando la clase CSS ui-diálogo-barra de título, pero yo recomiendo que utiliza el ThemeRoller tool.

Consulte también:

Fuente

2009-03-31 18:55:23 CMS

El el ejemplo anterior funciona bien pero solo con el color rojo del tema de error.

Aquí una solución sencilla con sólo cambiar la imagen de cabecera en el css:

css:

.ui-widget-header-custom{ 
    background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;  
}

javascript:

$('#my_dialog').dialog({ 
    open: function(event, ui){ 
     $(this).parents(".ui-dialog:first").find(".ui-widget-header") 
      .removeClass("ui-widget-header").addClass("ui-widget-header-custom"); 
    } 
});

Aviso que, contrariamente al ejemplo anterior, que elimina el:

removeClass("ui-widget-header")

en lugar de limitarse a añadir la clase en la:

find(".ui-dialog-titlebar")

tener en cuenta que este ejemplo funciona con la cabecera de diálogo sin su vínculo.

Fuente

2011-07-14 18:39:05

Utilice la propiedad dialogClass. Puede aplicar a cualquier CSS en el diálogo de jquery. A continuación estamos formateando el encabezado y los bloques de contenido.

<head> 
<style> 
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase} 
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff} 
</style> 
<script> 
     $('#jq_dialog').dialog({ 
      title: 'Detalhes do produto', 
      modal: true, 
      resizable: false, 
      width: 500, 
      maxHeight: 400, 
      closeText: 'fechar', 
      draggable: true, 
      show: 'fade', 
      hide: 'fade', 
      dialogClass: 'main-dialog-class' 
     }); 
</script> 
</head> 
<body> 
<div id="jq_dialog">Hello StackOverflow!</div> 
</body>

Fuente

2012-08-16 13:16:44

Estoy de acuerdo. Aplicar o eliminar clases con javascript parece ser la forma incorrecta de hacerlo. Las clases de CSS describen con precisión el estado del elemento, solo desea cambiar la apariencia del elemento mientras está en ese estado. – ctb

¿qué tal cambiar los colores de los botones del menú emergente modal? –

A veces no puede editar el archivo css. Para que pueda probar esto:

dialog = $('<div/>').dialog({ 
    title: 'Dialog with css for title bar', 
    open: function() { 
    $(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E'); 
    } 
});

Fuente

2014-04-07 09:56:33 Hermann77

Respuesta

Cuestiones relacionadas