Question

我正在寻找一个模式对话框（使用UI对话框）和独特的CSS，它与传统的对话框是分开的，所以本质上要有两个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（取决于我想要的那个），但是这将阻止在同一页面中同时使用这两个对话框。

我该怎么做？

Answer 1

当前版本的对话框有“dialogClass”选项，您可以将其与您的ID一起使用。例如，

$('foo').dialog({dialogClass:'dialog_style1'});

然后CSS将是

.dialog_style1 {color:#aaa;}

Answer 2

在Ajax：

中调用对话框后立即运行以下命令

    $(".ui-dialog-titlebar").hide();
    $(".ui-dialog").addClass("customclass");

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

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

Answer 3

当我试图找到类似的答案时，这个问题出现了。考虑：

    $('.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包装器的问题 - 您需要以上评论可以帮助那些， Using Multiple jQuery UI Themes on a Single Page （Filament博客）。

Answer 4

根据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的 nearest（）方法将任何类添加到第一个或第二个对话框中。例如：

$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1');

$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');

然后CSS它。

Answer 5

我通过以内联样式覆盖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>

Answer 6

执行此操作的标准方法是使用jQuery UI CSS Scopes：

<div class="myCssScope">
   <!-- dialog goes here -->
</div>

不幸的是，jQuery UI对话框将对话框DOM元素移动到文档的末尾，以修复潜在的z-index问题。这意味着范围界定不起作用（它将不再具有“.myCssScope”祖先）。

我designed a workaround的Christoph Herold implemented as a jQuery plugin，也许会有所帮助。

Answer 7

您可以将类添加到标题中，如下所示：

$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');

Answer 8

试试这些：

#dialog_style1 .ui-dialog-titlebar { display:none; }
#dialog_style2 .ui-dialog-titlebar { color:#aaa; }

我能为您提供的最佳建议是在Firefox中加载页面，打开对话框并使用Firebug进行检查，然后在控制台中尝试不同的选择器，看看哪些有效。您可能需要使用其他一些descendant selectors。

jQuery UI Dialog单独的CSS样式

8 个答案: