Login/Register
jQuery dialog theme and style
Asked Answered
Solved jquerydialogthemestitlebarbackground-color
X

6

14

How do I change the background color of the title bar of a jQuery dialog?

I have looked at the themeroller but it does not seem to work for me.

Thanks

Xanthin answered 31/3, 2009 at 18:48 Comment(1)
Depends on which plug-in you use for displaying such dialog (there are no any dialogs in jQuery itself). – Maggoty
D
12

I do this way (adding "ui-state-error" style for header):

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

                });

            });
        </script>
Dispute answered 2/12, 2009 at 14:17 Comment(1)
Don't change it with javascript. Use CSS. – Lidalidah
D
13

You can change it by modifying the ui-dialog-titlebar CSS class, but I highly recommend you to use the ThemeRoller tool.

See also:

Dhiren answered 31/3, 2009 at 18:55 Comment(0)
D
12

I do this way (adding "ui-state-error" style for header):

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

                });

            });
        </script>
Dispute answered 2/12, 2009 at 14:17 Comment(1)
Don't change it with javascript. Use CSS. – Lidalidah
S
3

There are classes associated with each element in the dialog.

Use Firebug to inspect the elements and use CSS to style them. For example, the title bar has the class "ui-dialog-titlebar".

(this assumes that you are using the jQuery UI Dialog)

Sondrasone answered 31/3, 2009 at 18:54 Comment(0)
C
2

Use the dialogClass property. You can apply to whatever css in jquery dialog. Below we are formatting header and content blocks.

<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>
Cursory answered 16/8, 2012 at 13:16 Comment(2)
I agree. Applying or removing classes with javascript seems the wrong way to go about it. The css classes are accurately describing the state of the element, you just want to change the appearance of the element while in that state. – Fitful
what about changing the colors of the buttons of the modal popup? – Regionalism
P
1

The previous example works well but with only the red color of the error theme.

Here a simple solution with just changing the header image in the 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");
    }
});

Notice that contrary to the previous example, I removed the: 

removeClass("ui-widget-header")

instead of just adding the class on the:

find(".ui-dialog-titlebar")

Must note that this example works with the dialog header without its link.

Pitch answered 14/7, 2011 at 18:39 Comment(0)
P
0

Sometimes you can't edit the css file. So you can try this:

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');
  } 
});
Papaverine answered 7/4, 2014 at 9:56 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.