jQuery dialog theme and style

2019-03-15 04:52发布

站内问答 / jQuery
789 6 2

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

6条回答
smile是对你的礼貌
2楼-- · 2019-03-15 05:35

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>
查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
3楼-- · 2019-03-15 05:38

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

See also:

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
4楼-- · 2019-03-15 05:39

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)

查看更多
0人赞 添加讨论(0) 举报
狗以群分
5楼-- · 2019-03-15 05:42

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');
  } 
});
查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
6楼-- · 2019-03-15 05:44

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>
查看更多
0人赞 添加讨论(0) 举报
何必那么认真
7楼-- · 2019-03-15 05:48

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)