jQuery UI Dialog 个人 CSS 样式

问题描述

我希望使用与传统对话框不同的独特 CSS 来设置模式对话框(使用 UI 对话框)的样式，因此本质上是有两个看起来不同的 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 Dialog 个人 CSS 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！