CODEWITHSUNDEEP
javascriptcssjquery-ui
vikram.fartyal
vikram.fartyal

Reputation: 148

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

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: enter image description here

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:

enter image description here

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.

Upvotes: 4

Views: 5520

Answers (2)

esadun
esadun

Reputation: 66

Using a CSS selector for your particular dialog's ID, as EasyPush suggests, isn't going to work because your content becomes 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;
}

Upvotes: 5

EasyPush
EasyPush

Reputation: 776

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

Upvotes: 1

Related Questions