jQuery UI Dialog individual CSS styling

Question

I m looking to style a modal dialog  using UI Dialog  with unique CSS that is separate from the traditional dialog  so in essence to have two jQuery dialogs that each look different   I ve styled one  for example    lt div id  dialog style1  class  dialog1 hidden  gt One content lt  div gt    and another   lt div id  dialog style2  class  dialog2 hidden  gt Another content lt  div gt    Unfortunately I ve noticed that using separate CSS to style parts of the dialog box  like   dialog1  ui-dialog-titlebar   display none     dialog2  ui-dialog-titlebar   color  aaa      doesn t work because  ui-dialog-titlebar does not have the class  dialog1  and I can t do an addClass either without breaking into the plugin    An alternative would be to have an element like body have a unique class id  depending on which one I want   but that would preclude having both dialogs in the same page   How can I do this

User · Answer

This issue turned up for me when I was trying to find a similar answer. Consider:

    $('.ui-dialog').wrap('<div class="abc" />');
    $('.ui-widget-overlay').wrap('<div class="abc" />');

Where abc is the name of your 'CSS wrapper' - see Stack Overflow question Custom CSS scope and jQuery UI dialog themes where I found the answer from Evgeni Nabokov. For more information on the CSS wrapper in use with a jQuery UI dialog box - see the following (but note they do NOT really solve the issue of the CSS wrapper with the dialog box - you need the above comments to help there, Using Multiple jQuery UI Themes on a Single Page (Filament blog).

User · Answer

According to the UI dialog documentation  the dialog plugin generates something like this    lt div class  ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable  gt      lt div class  ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix  gt         lt span id  ui-dialog-title-dialog  class  ui-dialog-title  gt Dialog title lt  span gt         lt a class  ui-dialog-titlebar-close ui-corner-all  href     gt  lt span class  ui-icon ui-icon-closethick  gt close lt  span gt  lt  a gt      lt  div gt      lt div class  ui-dialog-content ui-widget-content  id  dialog style1  gt         lt p gt One content lt  p gt      lt  div gt   lt  div gt    That means what you can add to any class to exactly to first or second dialog using jQuery s closest   method  For example       dialog style1   closest   ui-dialog   addClass  dialog style1         dialog style2   closest   ui-dialog   addClass  dialog style2      and then CSS it

User · Answer

The current version of dialog has the option  dialogClass  which you can use with your id s   For example      foo   dialog  dialogClass  dialog style1       Then the CSS would be   dialog style1  color  aaa

User · Answer

The standard way to do this is with jQuery UI s CSS Scopes    lt div class  myCssScope  gt      lt  -- dialog goes here -- gt   lt  div gt    Unfortunately  the jQuery UI dialog moves the dialog DOM elements to the end of the document  to fix potential z-index issues  This means the scoping won t work  it will no longer have a   myCssScope  ancestor    Christoph Herold designed a workaround which I ve implemented as a jQuery plugin  maybe that will help

User · Answer

You can add the class to the title like this       dialog style1   siblings  div ui-dialog-titlebar   addClass  dialog1

User · Answer

I created custom styles by just overriding jQuery classes in inline style  So on top of the page  you have the jQuery CSS linked and right after that override the classes you need to modify    lt head gt       lt link href   Content theme base jquery ui all css  rel  stylesheet   gt        lt style type  text css  gt           ui-dialog  ui-dialog-content                       position  relative              border  0              padding   5em 1em              background  none              overflow  auto              zoom  1              background-color   ffd              border  solid 1px  ea7                      ui-dialog  ui-dialog-titlebar                       display none                      ui-widget-content                       border none                 lt  style gt   lt  head gt

User · Answer

Run the following immediately after the dialog is called in the Ajax           ui-dialog-titlebar   hide            ui-dialog   addClass  customclass      This applies just to the dialog that is opened  so it can be changed for each one used     This quick answer is based on another response on Stack nbsp Overflow

User · Answer

Try these    dialog style1  ui-dialog-titlebar   display none     dialog style2  ui-dialog-titlebar   color  aaa      The best recommendation I can give for you is to load the page in Firefox  open the dialog and inspect it with Firebug  then try different selectors in the console  and see what works  You may need to use some of the other descendant selectors

[jquery] jQuery UI Dialog individual CSS styling

Examples related to jquery

Examples related to css

Examples related to jquery-ui

Examples related to dialog

[jquery] jQuery UI Dialog individual CSS styling

Examples related to jquery

Examples related to css

Examples related to jquery-ui

Examples related to dialog

Examples related to modal-dialog