Customize style for a particular jquery-ui dialog box - not all dialogs?

Question

I am using jquery-ui dialog in my application. Now I want to configure the signin / sinup dialog, i.e. jquery-ui dialog. without settings, the dialogs look like this:

but when I made the following changes on the login.jsp page, which is also in style, it changes all the application dialogs that I don’t want, but only the signin / signup dialog. CSS code:

.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 dialog box (id = "signinDialog"):

 $(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 get the signin / signup dialog the way I want, but the problem is that this is a jquery-ui dialog css change for the whole application and looks like this:

I got stuck in this issue in the morning and tried many times to decide how, but everything fell. Atlast, I have to ask about this.

I want all dialogs to remain the same except for the signin / signup dialog after configuration.

Answer 1

Using a CSS selector for your specific dialog id, as EasyPush suggests, will not work because your content becomes a child of the dialog element in the DOM. Since CSS has no parent selectors (see CSS selector for "foo that contains a string"? ), I see no way to use pure CSS. Instead, you will need to use javascript.

Using jQuery for the close button, for example:

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

Unfortunately, applying the "! Important" rule to CSS through jQuery is somewhat complicated. Instead, you may prefer to use a class and then style this class in CSS with "! Important". Sort of:

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

Along with the css rule:

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

Answer 2

If I do not misunderstand you, it seems that you are really changing the layout of all the dialogs. This is because the ".ui-dialog" selector will match all the dialogs in your application.

If you only want to customize the style of the input dialog, you only need to specifically select these elements. You should do it 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; }