jQuery 对话框主题和样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/702510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery dialog theme and style
提问by Picflight
How do I change the background color of the title bar of a jQuery dialog?
如何更改 jQuery 对话框标题栏的背景颜色？
I have looked at the themeroller but it does not seem to work for me.
我看过主题滚轮，但它似乎对我不起作用。
Thanks
谢谢
采纳答案by DonSleza4e
I do this way (adding "ui-state-error" style for header):
我这样做（为标题添加“ui-state-error”样式）：
<script type="text/javascript">
$(function () {
$("#msg").dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
}
});
});
</script>
回答by CMS
You can change it by modifying the ui-dialog-titlebar CSS class, but I highly recommend you to use the ThemeRoller tool.
您可以通过修改 ui-dialog-titlebar CSS 类来更改它，但我强烈建议您使用ThemeRoller 工具。
See also:
也可以看看：
回答by jonstjohn
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".
使用 Firebug 检查元素并使用 CSS 设置它们的样式。例如，标题栏具有“ui-dialog-titlebar”类。
(this assumes that you are using the jQuery UI Dialog)
（这假设您使用的是 jQuery UI 对话框）
回答by Junior Mayhé
Use the dialogClassproperty. You can apply to whatever css in jquery dialog.
Below we are formatting header and content blocks.
使用dialogClass物业。您可以应用到 jquery 对话框中的任何 css。下面我们正在格式化标题和内容块。
<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>
回答by Geoffroy CALA
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 中的标题图像：
css:
css：
.ui-widget-header-custom{
background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;
}
javascript:
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.
必须注意，此示例适用于没有链接的对话框标题。
回答by Hermann Schwarz
Sometimes you can't edit the css file. So you can try this:
有时您无法编辑 css 文件。所以你可以试试这个：
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');
}
});
