jQuery UI对话框单独的CSS样式 [英] jQuery UI Dialog individual CSS styling

问题描述

我想使用与传统对话框分开的独特CSS风格模式对话框（使用UI对话框），因此本质上有两个jQuery对话框，每个对话框看起来不同。

我有一个样式，例如

 < div id =dialog_style1class = dialog1 hidden>一个内容< / div> 
  

和另一个

 code>< div id =dialog_style2class =dialog2 hidden>其他内容< / div>不幸的是，我注意到使用单独的CSS来对对话框中的部分进行样式化，例如
 
  .dialog1 .ui-dialog-titlebar {display：none; } 
 .dialog2 .ui-dialog-titlebar {color：#aaa; } 
  
无效，因为 .ui-dialog-titlebar 没有类 .dialog1 ，我不能做一个 addClass 插件。 
 
 
 
另一种方法是让一个类似 body 的元素具有唯一的类/ 
 
 
 
我如何做到这一点？
解决方案
在 Ajax ：
  $（ui-dialog-titlebar）。 
 $（。ui-dialog）。addClass（customclass）; 
  
这仅适用于打开的对话框，因此可以对每个对话框进行更改。 
 
 
 
（此快速回答基于Stack Overflow的另一个回应。）
 
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.

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
.dialog1 .ui-dialog-titlebar { display:none; }
.dialog2 .ui-dialog-titlebar { color:#aaa; }
doesn't work because .ui-dialog-titlebar does not have the class .dialog1, and I can't do an addClass either without breaking into the plugin. 

An alternative would be to have an element like body have a unique class/id (depending on which one I want), but that would preclude having both dialogs in the same page.

How can I do this?
解决方案
Run the following immediately after the dialog is called in the 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.)

                        
这篇关于jQuery UI对话框单独的CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！