4

我在我的应用程序中使用 jquery-ui 对话框。现在我想自定义登录/sinup 对话框，即 jquery-ui 对话框。没有自定义对话框看起来像： 在此处输入图像描述

但是当我对 login.jsp 页面进行以下更改时，它也改变了我不想发生的所有应用程序对话框，而只是登录/注册对话框。CSS代码是：

.ui-widget-header {
    background: #343434 !important;
    border: none
}

.ui-dialog-titlebar-close{
    background: #1C1C1C !important;
}

.ui-dialog {
    background: #343434 !important;
    border: thin 1px;
}

此登录对话框 (id="signinDialog") 的 js 代码为：

$(document).ready(function() {
$("#signinDialog").dialog({
    width : 600,
    resizable : false,
    modal : true,
    autoOpen : false,
    position : ['top', 157]
});



 function openLoginPopup() {
    $("#signinDialog").dialog("open");
}

在这些更改之后，我以我想要的方式获得登录/注册对话框，但问题是这正在更改所有应用程序的 jquery-ui 对话框 css，看起来像这样：

在此处输入图像描述

我从早上开始就陷入了这个问题，并尝试了很多方法来解决，就像 这样，但都失败了。Atlast 我不得不问这个。

我希望所有对话框都保持不变，除了自定义后的登录/注册对话框。

4

2 回答 2

5

正如 EasyPush 建议的那样，为特定对话框的 ID 使用 CSS 选择器是行不通的，因为您的内容成为DOM 中对话框元素的子元素。由于 CSS 没有父选择器（请参阅CSS 选择器以获取“包含 bar 的 foo”？），我无法看到使用纯 CSS。相反，您需要使用 javascript。

使用 jQuery 作为关闭按钮，例如：

$("#signinDialog").parent().find(".ui-dialog-titlebar-close").css("background","#1C1C1C");

不幸的是，通过 jQuery 将“！important”规则应用于 CSS 有点棘手。您可能更喜欢应用一个类，然后在 CSS 中使用“！important”设置该类的样式。就像是：

$("#signinDialog").parent().find(".ui-dialog-titlebar-close").addClass("mySpecialClass");

连同一个CSS规则：

.mySpecialClass{
background: #1C1C1C !important;
}
于 2012-09-20T23:41:58.290 回答
1

如果我没有误解你，你似乎确实在改变所有对话的布局。这是因为选择器“.ui-dialog”将匹配您应用程序中的所有对话。

如果您只想专门设置登录对话框的样式，则只需要专门选择这些元素。您应该能够按以下方式执行此操作：

#signinDialog.ui-dialog {
    background: #343434 !important;
    border: none
}

#signinDialog .ui-dialog-titlebar-close{
    background: #1C1C1C !important;
}

#signinDialog .ui-dialog {
    background: #343434 !important;
    border: thin 1px;
}
于 2012-09-20T12:40:39.127 回答