jQuery UI Dialog单独的CSS样式

Question

我正在寻找一个模式对话框(使用UI对话框)和独特的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具有唯一的类/ id(取决于我想要的那个),但是这将排除在同一页面中同时具有两个对话框.

我怎样才能做到这一点？

Answer 1

当前版本的对话框有"dialogClass"选项,您可以将其与您的id一起使用.例如,

$('foo').dialog({dialogClass:'dialog_style1'});

然后CSS将是

.dialog_style1 {color:#aaa;}

这实际上对我的帮助不仅仅是答案.通过定义我自己的自定义样式,我可以将所有UI元素重新定义为链接类.即.dialog_style1 .ui-dialog-title -etc.所选答案重新定义了对话框的主要内容,但不重新定义页眉和页脚. (4认同)
如果你有能力使用静态css类,最好不要使用javascript.这个答案比接受的答案要好. (2认同)

Answer 2

在Ajax中调用对话框后立即运行以下命令:

    $(".ui-dialog-titlebar").hide();
    $(".ui-dialog").addClass("customclass");

这仅适用于打开的对话框,因此可以针对每个使用的对话框进行更改.

(这个快速回答基于Stack Overflow的另一个响应.)