jQuery Dialogfeld Thema und Stil

Wie ändere ich die Hintergrundfarbe der Titelleiste eines jQuery-Dialogfelds?jQuery Dialogfeld Thema und Stil

Ich habe mir den themeroller angesehen, aber es scheint nicht für mich zu arbeiten.

Danke

2009-03-31 Picflight

Abhängig davon, welches Plug-In Sie für die Anzeige eines solchen Dialogs verwenden (es gibt keine Dialoge in jQuery selbst). –

ich auf diese Weise tun (Hinzufügen "ui-State-Fehler" -Stil für Header):

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

       }); 

      }); 
     </script>

Quelle

2009-12-02 14:17:29 DonSleza4e

Ändern Sie es nicht mit Javascript. Verwenden Sie CSS. –

Mit jedem Element im Dialogfeld sind Klassen verknüpft.

Verwenden Sie Firebug, um die Elemente zu untersuchen, und verwenden Sie CSS, um sie zu stylen. Zum Beispiel hat die Titelleiste die Klasse "ui-dialog-titlebar".

(dies setzt voraus, dass Sie die jQuery UI-Dialog verwenden)

Quelle

2009-03-31 18:54:23 jonstjohn

Sie es durch Modifizieren der ui-Dialog-titlebar CSS-Klasse ändern kann, aber ich empfehle Ihnen, die ThemeRoller tool zu verwenden.

Siehe auch:

Quelle

2009-03-31 18:55:23 CMS

Die Das vorherige Beispiel funktioniert gut, aber nur mit der roten Farbe des Fehlerthemas.

Hier ist eine einfache Lösung mit nur in der CSS das Header-Bild zu ändern:

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

Beachten Sie, dass im Gegensatz zum vorherigen Beispiel I entfernt die:

removeClass("ui-widget-header")

statt nur die Klasse auf der Zugabe:

find(".ui-dialog-titlebar")

muss beachten, dass dieses Beispiel mit den Dialog-Header funktioniert ohne den entsprechenden Link.

Quelle

2011-07-14 18:39:05

Verwenden Sie die dialogClass Eigenschaft. Sie können auf jeden CSS-Dialog in jQuery anwenden. Unten formatieren wir Kopf- und Inhaltsblöcke.

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

Quelle

2012-08-16 13:16:44

Ich stimme zu. Das Anwenden oder Entfernen von Klassen mit Javascript scheint der falsche Weg zu sein. Die CSS-Klassen beschreiben den Zustand des Elements genau. Sie möchten lediglich das Erscheinungsbild des Elements in diesem Zustand ändern. – ctb

Was ist mit dem Ändern der Farben der Schaltflächen des modalen Popup? –

Manchmal können Sie die CSS-Datei nicht bearbeiten. So können Sie das ausprobieren:

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

Quelle

2014-04-07 09:56:33 Hermann77

jQuery Dialogfeld Thema und Stil

Antwort

Verwandte Themen