Question

我在xhtml页面中使用了2 Jquery Dialog框。有2个链接，当用户点击这些链接时，每个链接将呈现不同的Dialog框。感觉外观和感觉上的不同Dialog框是不同的。由于两者都指的是jquery-ui-rev.css，无论在.css文件中进行了哪些CSS更改，它都会应用于Dialog框。

Image from Chrome web developer is attached for reference

所以，我尝试了dialogClass。我将dialogClass应用于其中一个Dialog框，然后将另一个框保留原样。

我想出了以下代码并进行了部署。

$j("#dialog").dialog({
    dialogClass: 'ui-dialog',
      ....

<head>
<style type="text/css">
 .ui-dialog
{
padding: none;
overflow: hidden;
position: absolute;
width: 100px;
left: 100px;
top: 100px;
}
</style>
</head>

但是，我在这里写的ui-dialog课程并没有覆盖ui-dialog的标准jquery-ui-rev.css课程。然后，我还尝试使用ui-dialog的其他名称。即，我使用ui-dialog重命名my-dialog。即使这样，my-dialog也未申请Dialog框。它仍然需要ui-dialog的标准CSS类。

然后，我也尝试使用以下代码

$j("#dialog").addClass('my-dialog').dialog({

这也无法覆盖标准ui-dialog类。

PS注意：我已将jquery-ui-rev.css重命名为jquery-ui-curretpacks.css。 jquery-ui-currentpacks.css包含jquery-ui-rev.css

的确切内容

@Dipaks 我已按照您的提及尝试过该解决方案。代码如下，

$('.ui-dialog').addClass('new-ui-dialog');
$j("#dialog").dialog({
    dialogClass: 'new-ui-dialog',
....

但是，正如我在新图像中附加的那样，可以看出虽然ui-dialog正在被new-ui-dialog替换，但css属性仍然来自ui-dialog。

我也尝试过没有dialogClass，如下所示，附加$ J（ “＃对话”）。对话框（{ .....

<style type="text/css">
.new-ui-dialog
{
 //my new css
}
</style>

enter image description here

我在这附上第3张图片。在此SS中，仍会覆盖new-ui-dialog属性。

Answer 1

.ui-dialog正在为元素添加内嵌 css。如果要覆盖这些样式，请执行此操作 -

$('.ui-dialog').addClass('new-ui-dialog');

CSS -

.new-ui-dialog { color: red !important; }

dialogClass不应用给定的样式类

1 个答案: