jQuery UI Dialog 个人 CSS 样式
Posted
技术标签:
【中文标题】jQuery UI Dialog 个人 CSS 样式【英文标题】：jQuery UI Dialog individual CSS styling 【发布时间】：2010-11-21 10:58:10 【问题描述】：我希望使用与传统对话框不同的独特 CSS 来设置模式对话框（使用 UI 对话框）的样式，因此本质上是有两个看起来不同的 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（取决于我想要哪个），但这会阻止两个对话框在同一页面中。
我该怎么做？
【问题讨论】：
【参考方案1】：您可以像这样将类添加到标题中：
$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');
【讨论】：
对，但.ui-dialog-titlebar 没有.dialog1 类。 .dialog1 display:none; 将隐藏对话框的全部内容，这是我不想要的。
.ui-dialog-titlebar 在哪里？
好的。我正在查看 jqModal (dev.iceburg.net/jquery/jqModal) 并没有找到它。【参考方案2】：
试试这些：
#dialog_style1 .ui-dialog-titlebar display:none;
#dialog_style2 .ui-dialog-titlebar color:#aaa;
我能给你的最好建议是在 Firefox 中加载页面，打开对话框并使用 Firebug 检查它，然后在控制台中尝试不同的选择器，看看有什么用。您可能需要使用其他一些descendant selectors。
【讨论】：
是的。它不起作用，我也尝试过使用 Firebug。这就是我发布的原因;-) 整个问题是 .ui-dialog-titlebar 环绕 #dialog_style1，所以虽然#dialog_style1 很好地适用于对话框的内容，但它不适用于标题本身。【参考方案3】：在Ajax 中调用对话框后立即运行以下命令：
$(".ui-dialog-titlebar").hide();
$(".ui-dialog").addClass("customclass");
这仅适用于打开的对话框，因此可以针对每个使用的对话框进行更改。
（此快速回答基于 *** 上的另一个回复。）
【讨论】：
在我的情况下，我还必须添加 $(".ui-dialog-titlebar").removeClass("ui-widget-header") 因为它覆盖了我的背景颜色。 就我而言， ui-dialog-content 成功了。 $(".ui-dialog-content").addClass("customclass");【参考方案4】：执行此操作的标准方法是使用 jQuery UI 的 CSS Scopes:
<div class="myCssScope">
<!-- dialog goes here -->
</div>
不幸的是，jQuery UI 对话框将对话框 DOM 元素移动到文档的末尾，以修复潜在的 z-index 问题。这意味着作用域将不起作用（它将不再具有“.myCssScope”祖先）。
Christoph Herold designed a workaround 我是 implemented as a jQuery plugin，也许这会有所帮助。
【讨论】：
【参考方案5】：根据UI dialog documentation，对话框插件生成如下内容：
<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 的 closest() 方法将内容添加到任何类中，以准确地添加到第一个或第二个对话框中。例如：
$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1');
$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');
然后CSS它。
【讨论】：
【参考方案6】：当前版本的对话框具有选项“dialogClass”，您可以将其与您的 id 一起使用。 例如，
$('foo').dialog(dialogClass:'dialog_style1');
那么CSS 就是
.dialog_style1 color:#aaa;
【讨论】：
这实际上比答案更能帮助我。通过定义我自己的自定义样式，我可以将所有 UI 元素重新定义为链式类。即 .dialog_style1 .ui-dialog-title -等。所选答案重新定义了对话框的主要内容，而不是页眉和页脚。 如果你有能力使用静态css类，最好不要使用javascript。这个答案比公认的要好。【参考方案7】：当我试图找到类似的答案时，我发现了这个问题。考虑：
$('.ui-dialog').wrap('<div class="abc" />');
$('.ui-widget-overlay').wrap('<div class="abc" />');
abc 是您的“CSS 包装器”的名称 - 请参阅 Stack Overflow 问题 Custom CSS scope and jQuery UI dialog themes，我从 Evgeni Nabokov 那里找到了答案。有关与jQuery UI 对话框一起使用的 CSS 包装器的更多信息 - 请参阅以下内容（但请注意，它们并不能真正解决 CSS 包装器的问题对话框 - 您需要以上内容cmets 来帮忙，Using Multiple jQuery UI Themes on a Single Page（Filament 博客）。
【讨论】：
感谢您添加此答案，尽管这个问题已有几年历史了。这对我有帮助！ =)【参考方案8】：我只是通过覆盖内联样式中的 jQuery 类来创建自定义样式。所以在页面顶部，你有 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>
【讨论】：
好吧，谢谢！太多狼吞虎咽的东西找不到我的出路。 4 个 css 文件 大量的 jquery js 文件。我按照你的方式做了。我在我的布局中找到了最低的 css 文件，并将你的整个标签放在它的正下方！呀！我想要标题，让它工作，但想要一个“x”而不是一个关闭按钮。我知道它在外面等着我。以上是关于jQuery UI Dialog 个人 CSS 样式的主要内容，如果未能解决你的问题，请参考以下文章