1

Jquery Dialogxhtmlページで2つのボックスを使用しています。2つのリンクがあり、ユーザーがそれらのリンクをクリックすると、各リンクは異なるDialogボックスをレンダリングします。Dialog見た目と感触の意味で異なるボックスは異なります。.cssどちらもそのファイルで行われたCSSの変更に関係なくjquery-ui-rev.cssを参照しているため、両方のDialogボックスに適用されます。

ChromeWeb開発者からの画像が参照用に添付されています

だから、私はで試しました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オーバーライドしていません。次に、別の名前で試してみました。つまり、名前を。に変更しました。それでもボックスには応募されていません。それでも、の標準CSSクラスから取得します。ui-dialogjquery-ui-rev.cssui-dialogui-dialogmy-dialogmy-dialogDialogui-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>

ここに画像の説明を入力してください

ここに3枚目の画像を添付しています。このSSでは、new-ui-dialog属性は引き続きオーバーライドされます。Image3

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 に答える