1

Jquery Dialog我在我的 xhtml 页面中使用了 2 个框。有 2 个链接，当用户点击这些链接时，每个链接都会呈现一个不同的Dialog框。不同Dialog的盒子在感觉观感上是不同的。由于两者都引用 jquery-ui-rev.css 在该文件中所做的任何 CSS 更改.css，因此它将应用于两个Dialog框。

附上来自 Chrome 网络开发人员的图片以供参考

所以，我尝试使用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盒子。它仍然来自标准的 CSS 类ui-dialog。

然后，我也尝试了下面的代码

$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("#dialog").dialog({ .....

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

在此处输入图像描述

我在这里附上第三张图片。在这个 SS 中，new-ui-dialog 属性仍然被覆盖。图3

4

1 回答 1

1

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

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

CSS -

.new-ui-dialog { color: red !important; }
于 2012-10-18T14:07:53.037 回答