爲特定的jquery-ui對話框自定義樣式不是所有的對話框？

我在我的應用程序中使用jquery-ui對話框。現在我想定製登錄/註冊對話框，即jquery-ui對話框。沒有定製對話框是這樣的： enter image description here 爲特定的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; 
}

和js代碼（ID =「signinDialog」）是：

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



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

這些變化我得到的登入/註冊對話框我想要的方式，但在後問題是這種情況正在改變jQuery的用戶界面對話框的CSS的所有應用程序和看起來像這樣：

enter image description here

我一直停留在從早上這個問題，並試圖很多Ö f方式來解決，像 this但是全部下跌。 Atlast我不得不問這個。

我希望自定義後所有對話框除了登錄/註冊對話框保持不變。

來源

2012-09-20 vikram.fartyal

使用爲您的特定對話的ID的CSS選擇器，如EasyPush顧名思義，是行不通的，因爲你的內容變成了孩子對話框元素的DOM。由於CSS沒有父選擇器（請參閱CSS selector for "foo that contains bar"?），因此我無法看到使用純CSS。相反，你需要使用JavaScript。

使用jQuery的關閉按鈕，例如：「重要的」

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

不幸的是，通過jQuery應用規則CSS是有點棘手。你可能寧願申請一個班級，然後，在CSS中使用「！important」。喜歡的東西：

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

隨着CSS規則：

.mySpecialClass{ 
background: #1C1C1C !important; 
}

來源

2012-09-20 23:41:58 esadun

如果我沒有誤解你，看來你確實正在改變所有對話的佈局。這是因爲選擇器「.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-20 12:40:39 EasyPush

我試過，但沒有在所有的工作...！ –

不幸的是'.ui-dialog'在'＃signinDialog'之外，所以這是行不通的。 –

爲特定的jquery-ui對話框自定義樣式不是所有的對話框？

回答

相關問題