4

アプリケーションで jquery-ui ダイアログを使用しています。今、サインイン/サインアップ ダイアログ、つまり 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 を変更し、次のようになっていることです:

ここに画像の説明を入力

私は朝からこの問題で立ち往生しており、このように解決するために多くの方法を試し ましたが、すべて横ばいになりました. 最後に、私はこれを尋ねなければなりません。

カスタマイズ後、サインイン/サインアップ ダイアログ以外のすべてのダイアログを同じままにしたい。

4

2 に答える 2

5

EasyPush が示唆するように、特定のダイアログの ID に CSS セレクターを使用しても機能しません。これは、コンテンツがDOM のダイアログ要素の子になるためです。CSS には親セレクターがないため ( 「バーを含む foo」の CSS セレクターを参照してください)、純粋な CSS を使用する方法はありません。代わりに、javascript を使用する必要があります。

たとえば、閉じるボタンに jQuery を使用します。

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

残念ながら、"!important" ルールを jQuery 経由で 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 に答える