jQuery UI Dialog 个人 CSS 样式答案

【问题标题】：jQuery UI Dialog individual CSS stylingjQuery UI Dialog 个人 CSS 样式
【发布时间】：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（取决于我想要哪个），但这会阻止两个对话框在同一页面中。

我该怎么做？

【问题讨论】：

标签： jquery css jquery-ui dialog modal-dialog

【解决方案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");

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

（此快速回答基于 StackOverflow 上的另一个回复。）

【讨论】：

在我的情况下，我还必须添加 $(".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”而不是一个关闭按钮。我知道它在外面等着我。