jQuery UI 对话框单独的 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1308369/
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 UI Dialog individual CSS styling
提问by Rio
I'm looking to style a modal dialog (using UI Dialog) with unique CSS that is separate from the traditional dialog, so in essence to have two jQuery dialogs that each look different.
我正在寻找具有与传统对话框分开的独特 CSS 的模式对话框（使用 UI 对话框）的样式，因此本质上有两个看起来不同的 jQuery 对话框。
I've styled one, for example,
例如，我设计了一个样式，
<div id="dialog_style1" class="dialog1 hidden">One content</div>
and another
而另一个
<div id="dialog_style2" class="dialog2 hidden">Another content</div>
Unfortunately I've noticed that using separate CSS to style parts of the dialog box, like
不幸的是，我注意到使用单独的 CSS 来设置对话框的部分样式，例如
.dialog1 .ui-dialog-titlebar { display:none; }
.dialog2 .ui-dialog-titlebar { color:#aaa; }
doesn't work because .ui-dialog-titlebardoes not have the class .dialog1, and I can't do an addClasseither without breaking into the plugin.
不起作用，因为.ui-dialog-titlebar没有 class .dialog1，而且我不能addClass在不闯入插件的情况下做任何事情。
An alternative would be to have an element like bodyhave a unique class/id (depending on which one I want), but that would preclude having both dialogs in the same page.
另一种方法是让一个元素像body有一个唯一的类/id（取决于我想要的那个），但这会阻止在同一页面中同时拥有两个对话框。
How can I do this?
我怎样才能做到这一点？
采纳答案by Rio
Run the following immediately after the dialog is called in the Ajax:
在Ajax 中调用对话框后立即运行以下命令：
$(".ui-dialog-titlebar").hide();
$(".ui-dialog").addClass("customclass");
This applies just to the dialog that is opened, so it can be changed for each one used.
这仅适用于打开的对话框，因此可以针对每个使用的对话框进行更改。
(This quick answer is based on another response on Stack Overflow.)
（这个快速回答基于 Stack Overflow 上的另一个回复。）
回答by Morgan T.
回答by Steve
This issue turned up for me when I was trying to find a similar answer. Consider:
当我试图找到类似的答案时，这个问题出现在我身上。考虑：
$('.ui-dialog').wrap('<div class="abc" />');
$('.ui-widget-overlay').wrap('<div class="abc" />');
Where abcis the name of your 'CSS wrapper' - see Stack Overflow question Custom CSS scope and jQuery UI dialog themeswhere I found the answer from Evgeni Nabokov. For more information on the CSS wrapper in use with a jQuery UIdialog box - see the following (but note they do NOT really solve the issue of the CSS wrapper with the dialog box- you need the above comments to help there, Using Multiple jQuery UI Themes on a Single Page(Filament blog).
abc您的“CSS 包装器”的名称在哪里- 请参阅堆栈溢出问题自定义 CSS 范围和 jQuery UI 对话框主题，我从Evgeni Nabokov那里找到了答案。有关与jQuery UI对话框一起使用的 CSS 包装器的更多信息- 请参阅以下内容（但请注意，它们并没有真正解决带有对话框的 CSS 包装器的问题- 您需要上述注释来帮助那里，使用多个 jQuery单个页面上的 UI 主题（Filament 博客）。
回答by Steef
I created custom styles by just overriding jQuery classes in inline style. So on top of the page, you have the jQuery CSS linked and right after that override the classes you need to modify:
我通过以内联样式覆盖 jQuery 类来创建自定义样式。因此，在页面顶部，您链接了 jQuery CSS，然后立即覆盖您需要修改的类：
<head>
<link href="/Content/theme/base/jquery.ui.all.css" rel="stylesheet"/>
<style type="text/css">
.ui-dialog .ui-dialog-content
{
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
zoom: 1;
background-color: #ffd;
border: solid 1px #ea7;
}
.ui-dialog .ui-dialog-titlebar
{
display:none;
}
.ui-widget-content
{
border:none;
}
</style>
</head>
回答by Vasilij
According to the UI dialog documentation, the dialog plugin generates something like this:
根据UI 对话框文档，对话框插件生成如下内容：
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div class="ui-dialog-content ui-widget-content" id="dialog_style1">
<p>One content</p>
</div>
</div>
That means what you can add to any class to exactly to first or second dialog using jQuery's closest()method. For example:
这意味着您可以使用jQuery的closest()方法添加到任何类到第一个或第二个对话框中。例如：
$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1');
$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');
and then CSS it.
然后CSS它。
回答by orip
The standard way to do this is with jQuery UI's CSS Scopes:
执行此操作的标准方法是使用 jQuery UI 的CSS Scopes：
<div class="myCssScope">
<!-- dialog goes here -->
</div>
Unfortunately, the jQuery UI dialog moves the dialog DOM elements to the end of the document, to fix potential z-index issues. This means the scoping won't work (it will no longer have a ".myCssScope" ancestor).
不幸的是，jQuery UI 对话框将对话框 DOM 元素移动到文档的末尾，以修复潜在的 z-index 问题。这意味着范围将不起作用（它将不再具有“.myCssScope”祖先）。
Christoph Herold designed a workaroundwhich I've implemented as a jQuery plugin, maybe that will help.
Christoph Herold设计了一种解决方法，我已将其实现为 jQuery 插件，也许这会有所帮助。
回答by Daniel Moura
You can add the class to the title like this:
您可以将类添加到标题中，如下所示：
$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');
回答by Pawel Krakowiak
Try these:
试试这些：
#dialog_style1 .ui-dialog-titlebar { display:none; }
#dialog_style2 .ui-dialog-titlebar { color:#aaa; }
The best recommendation I can give for you is to load the page in Firefox, open the dialog and inspect it with Firebug, then try different selectors in the console, and see what works. You may need to use some of the other descendant selectors.
我能给你的最好的建议是在 Firefox 中加载页面，打开对话框并使用 Firebug 检查它，然后在控制台中尝试不同的选择器，看看什么是有效的。您可能需要使用其他一些后代选择器。
