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

问题描述

我正在寻找一种模式对话框（使用UI对话框），使用与传统对话框不同的独特CSS，因此本质上有两个不同的jQuery对话框。

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>

另一个

<div id="dialog_style2" class="dialog2 hidden">Another content</div>

不幸的是，我注意到使用单独的CSS来对齐对话框的部分，如

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; }

不起作用，因为 .ui-dialog-titlebar 没有类 .dialog1 ，我不能做一个 addClass 插件。

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.

另一种替代方法是拥有像 body 的元素有一个唯一的类/ id（取决于哪个我想要），但这将排除同一页面中的两个对话框。

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.

我该怎么做？

推荐答案

在 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.

（这个快速回答是基于Stack Overflow的另一个回应。）

(This quick answer is based on another response on Stack Overflow.)

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