jQuery UI对话框单独的CSS样式
我正在寻找一种模式对话框（使用用户界面对话框）与传统的对话框独立的CSS，所以实质上有两个jQuery对话框，每个看起来不同。
举个例子，
<div id="dialog_style1" class="dialog1 hidden">One content</div> 和另一个
<div id="dialog_style2" class="dialog2 hidden">Another content</div>
不幸的是我注意到，使用单独的CSS来设置对话框的部分样式
.dialog1 .ui-dialog-titlebar { display:none; } .dialog2 .ui-dialog-titlebar { color:#aaa; }
不起作用，因为.ui-dialog-titlebar没有类.dialog1 ，我不能做一个addClass ，而不插入插件。
另一种方法是让像body这样的元素具有唯一的class / id（取决于我想要哪一个），但是这样做会阻止在同一个页面中同时存在两个对话框。
我怎样才能做到这一点？
当前版本的对话框有选项“dialogClass”，你可以使用你的ID。 例如，
$('foo').dialog({dialogClass:'dialog_style1'});
那么CSS会是
.dialog_style1 {color:#aaa;}
在Ajax中调用对话框后立即运行以下代码：
$(".ui-dialog-titlebar").hide(); $(".ui-dialog").addClass("customclass");
这仅适用于打开的对话框，因此可以对每个使用的对话框进行更改。
（这个快速的答案是基于堆栈溢出的另一个响应。）
当我试图find类似的答案时，这个问题出现了。 考虑：
$('.ui-dialog').wrap('<div class="abc" />'); $('.ui-widget-overlay').wrap('<div class="abc" />');
其中abc是你的“CSS包装”的名称 – 请参阅堆栈溢出问题自定义CSS范围和jQuery UI对话框主题 ，我从Evgeni Nabokovfind答案。 有关使用jQuery UI对话框的CSS包装器的更多信息，请参阅以下内容（但是请注意，它们并不真正用对话框解决CSS包装器的问题 – 您需要上面的注释来帮助解决这个问题， 使用多个jQuery单页上的UI主题 （Filament博客）。
根据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>
这意味着你可以使用jQuery的nearest（）方法将任何类添加到第一个或第二个对话框中。 例如：
$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1'); $('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');
然后CSS呢。
我通过内联样式重写jQuery类来创build自定义样式。 所以在页面顶部，你有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>
标准的做法是使用jQuery UI的CSS范围 ：
<div class="myCssScope"> <!-- dialog goes here --> </div>
不幸的是，jQuery UI对话框将对话DOM元素移动到文档的末尾，以修复潜在的z-index问题。 这意味着范围界定将不起作用（它不再具有“.myCssScope”祖先）。
Christoph Herold devise了一个我已经作为jQuery插件实现 的解决方法 ，也许这将有所帮助。
你可以把这个类添加到标题中，像这样：
$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');
试试这些：
#dialog_style1 .ui-dialog-titlebar { display:none; } #dialog_style2 .ui-dialog-titlebar { color:#aaa; }
我可以给你的最好的build议是在Firefox中加载页面，打开对话框并用Firebug检查它，然后在控制台中尝试不同的select器，看看有什么作用。 你可能需要使用一些其他的后代select器 。
