jQuery dialog theme and style

Come si modifica il colore di sfondo della barra del titolo di una finestra di dialogo jQuery?jQuery dialog theme and style

Ho guardato il themeroller ma non sembra funzionare per me.

Grazie

fonte

2009-03-31 Picflight

Dipende dal plug-in utilizzato per visualizzare tale finestra di dialogo (non ci sono finestre di dialogo in jQuery). –

faccio in questo modo (aggiungendo "ui-stato-errore" stile per intestazione):

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

       }); 

      }); 
     </script>

fonte

2009-12-02 14:17:29 DonSleza4e

Non cambiarlo con javascript. Usa CSS. –

Ci sono classi associate a ciascun elemento della finestra di dialogo.

Usa Firebug per ispezionare gli elementi e utilizzare i CSS per modellarli. Ad esempio, la barra del titolo ha la classe "ui-dialog-titlebar".

(questo presuppone che si sta utilizzando l'interfaccia utente di dialogo jQuery)

fonte

2009-03-31 18:54:23 jonstjohn

si può cambiare modificando la classe CSS ui-dialogo-barra del titolo, ma consiglio vivamente di utilizzare la ThemeRoller tool.

Consulta anche:

fonte

2009-03-31 18:55:23 CMS

Il l'esempio precedente funziona bene ma con solo il colore rosso del tema dell'errore.

Ecco una soluzione semplice con solo cambiando l'immagine di intestazione nel 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"); 
    } 
});

noti che contrariamente all'esempio precedente, ho rimosso il:

removeClass("ui-widget-header")

invece di aggiungere la classe sul:

find(".ui-dialog-titlebar")

Deve notare che questo esempio funziona con la finestra di intestazione senza il suo collegamento.

fonte

2011-07-14 18:39:05

Utilizzare la proprietà dialogClass. Puoi applicare a qualsiasi css nella finestra di dialogo jquery. Di seguito vengono formattati i blocchi di intestazione e contenuto.

<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>

fonte

2012-08-16 13:16:44

Sono d'accordo. Applicare o rimuovere classi con javascript sembra il modo sbagliato per farlo. Le classi css stanno descrivendo accuratamente lo stato dell'elemento, vuoi solo cambiare l'aspetto dell'elemento mentre sei in quello stato. – ctb

come cambiare i colori dei pulsanti del popup modale? –

A volte non è possibile modificare il file css. Quindi puoi provare questo:

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

fonte

2014-04-07 09:56:33 Hermann77

jQuery dialog theme and style

risposta

Problemi correlati