Question

我知道如何通过在div中附加一个类然后引用CSS .ui-dialog.myClass{}中的两个类来相互独立地设置对话框内容的样式。我想要做的是将对话框的标题彼此独立地设置样式，而我似乎无法使它工作。

.ui-widget-header.error-dialog{
background: red;
}

.ui-widget-header.success-dialog{
background: green;
}

等等......将附加在感兴趣对话框div上的类附加起来似乎并不能完成这项工作。

<div id="error-dialog" class="error-dialog" title="ERROR"></div>
<div id="success-dialog" class ="success-dialog" title="SUCCESS">
    <p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>

例如，我试图更改包含ERROR的灰色条的背景颜色，我可能只是没有使用正确的UI CSS类：

当我检查元素时，这就是HTML的样子，我有一种感觉，我只是没有为正确的类设计风格。以蓝色突出显示的div是控制标题颜色的位置。列出的所有类都自动分配给对话框，我没有编辑任何类。如果你编辑它们，它将影响所有对话框，而不仅仅是我想要的特定对话框。

Answer 1

不确定为什么需要.ui-widget-header。基本上无论你有什么样的课，你都会把它放在你的css面前。在你的例子中，它将是：

.error-dialog{
background: red;
}

.success-dialog{
background: green;
}

JS小提琴：https://jsfiddle.net/9acb42v8/

Answer 2

因此，在实例化对话框时，我将我的类混合在一起并实现了dialogClass选项，而不是专门将自定义类放在HTML中。值得注意的是，对话框 Class 有点用词不当，因为当您设置该选项时，您实际上是在放置目标对话框的ID，而不是类。这似乎与我想要的方式有关。

HTML：

<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
    <p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>

JS：

var errorDialog = $("#error-dialog").dialog({
              autoOpen: false,
              height: "auto",
              width: 1000,
              modal: true,
              dialogClass: 'error-dialog',
              buttons: [{
                  id: "error-ok",
                  text: "Ok",
                  click: function () {
                      errorDialog.dialog("close");
                  }
              }]
          });

      var successDialog = $('#success-dialog').dialog({
          autoOpen: false,
          height: 200,
          width: 400,
          modal: true,
          dialogClass: 'success-dialog',
          buttons: [{
              id: "success-ok",
              text: "Ok",
              click: function () {
                  successDialog.dialog("close");
              }
          }]
      });

CSS：

.error-dialog .ui-dialog-titlebar {
    border: 1px solid black;
    background: red;
}

.success-dialog .ui-dialog-titlebar{
    border: 1px solid black;
    background: green;
}

样式化jQuery UI对话框标题？

2 个答案: