javascript - customize the style for specific jquery-ui dialog box not all the dialogs? - Stack Overflow

admin管理员组

文章数量:1335590

i am using jquery-ui dialog in my application. now i want to customize the signin/sinup dialog i.e. jquery-ui dialog. without customization dialogs are looking like:

but when i made following changes to login.jsp page that too in style it is changing all the dialogs of application that i don't want to happen but only signin/signup dialog. CSS code is:

.ui-widget-header {
    background: #343434 !important;
    border: none
}

.ui-dialog-titlebar-close{
    background: #1C1C1C !important;
}

.ui-dialog {
    background: #343434 !important;
    border: thin 1px;
}

and js code for this signin dialog (id="signinDialog") is:

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



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

after these changes i am getting signin/signup dialog the way i want but the problem is this is changing jquery-ui dialog css for all application and looking like this:

I have been stuck in this issue from morning and tried lot of ways to resolve, like this but all fell flat. Atlast i have to ask this.

I want all dialogs remain same except signin/signup dialog after customization.

i am using jquery-ui dialog in my application. now i want to customize the signin/sinup dialog i.e. jquery-ui dialog. without customization dialogs are looking like:

but when i made following changes to login.jsp page that too in style it is changing all the dialogs of application that i don't want to happen but only signin/signup dialog. CSS code is:

.ui-widget-header {
    background: #343434 !important;
    border: none
}

.ui-dialog-titlebar-close{
    background: #1C1C1C !important;
}

.ui-dialog {
    background: #343434 !important;
    border: thin 1px;
}

and js code for this signin dialog (id="signinDialog") is:

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



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

after these changes i am getting signin/signup dialog the way i want but the problem is this is changing jquery-ui dialog css for all application and looking like this:

I have been stuck in this issue from morning and tried lot of ways to resolve, like this but all fell flat. Atlast i have to ask this.

I want all dialogs remain same except signin/signup dialog after customization.

• javascript
• css
• jquery-ui

Share Improve this question Follow edited May 23, 2017 at 12:26 CommunityBot 111 silver badge asked Sep 20, 2012 at 11:23 vikram.fartyalvikram.fartyal 14844 silver badges1111 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Using a CSS selector for your particular dialog's ID, as EasyPush suggests, isn't going to work because your content bees the child of the dialog element in the DOM. Since CSS doesn't have parent selectors (see CSS selector for "foo that contains bar"?), there would be no way I can see to use pure CSS. Instead, you'll need to use javascript.

Using jQuery for the close button, for instance:

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

Unfortunately, applying the "!important" rule to CSS via jQuery is a little tricky. You may instead prefer to apply a class and then style that class in CSS with "!important." Something like:

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

Along with a css rule:

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

If i'm not misunderstanding you it seems you are indeed changing the layout of all dialogues. This because the selector ".ui-dialog" will match all dialogues in your application.

If you only want to specifically style your signin dialog, you need to specifically select only these elements. You should be able to do this as follows:

#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;
}

本文标签： javascriptcustomize the style for specific jqueryui dialog box not all the dialogsStack Overflow