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,

<div id="dialog_style1" class="dialog1 hidden">One content</div>

and another

<div id="dialog_style2" class="dialog2 hidden">Another content</div>

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?

Peter Mortensen · Accepted Answer · 2013-07-10 10:40:03Z

62

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

edited Jul 10, 2013 at 10:40

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 21, 2011 at 21:10

Morgan T.

1,9371 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bruce Chapman Over a year ago

This actually helped me more than the answer. By defining my own custom style, I can then re-define all of the UI elements as chained classes. Ie .dialog_style1 .ui-dialog-title -etc. The selected answer redefines the main content of the dialog, but not the header and footer.

roman Over a year ago

It's better not to use javascript if you have the ability to use static css class. This answer is better than the accepted one.

Peter Mortensen · Accepted Answer · 2013-07-10 10:41:20Z

24

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 Overflow.)

edited Jul 10, 2013 at 10:41

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 20, 2009 at 20:18

Rio

15k22 gold badges72 silver badges110 bronze badges

2 Comments

maxivis Over a year ago

In my case I also had to add $(".ui-dialog-titlebar").removeClass("ui-widget-header") because it was overwriting my background-color.

mohit bansal Over a year ago

In my case, ui-dialog-content did the trick. $(".ui-dialog-content").addClass("customclass");

Community · Accepted Answer · 2017-05-23 12:19:26Z

4

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).

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Aug 28, 2012 at 13:37

Steve

6025 silver badges16 bronze badges

1 Comment

Will Marcouiller Over a year ago

Thanks for adding this answer though the question is a few years old. This helped me! =)

Peter Mortensen · Accepted Answer · 2013-07-10 11:02:57Z

4

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:

<head>
    <link href="/Content/theme/base/jquery.ui.all.css" rel="stylesheet"/>

    <style type="text/css">
        .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;
        }
    </style>
</head>

edited Jul 10, 2013 at 11:02

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 16, 2013 at 20:23

Steef

6079 silver badges21 bronze badges

1 Comment

JustJohn Over a year ago

Well, thank you!. Too much gobbly gook to find my way around. 4 css files a ton of jquery js files. I did your way. I found the lowest css file in my layout and put your whole tag right below it! ya! I wanted the title, got that to work, but would like an "x" instead of a close button. I know it's out there waiting for me.

Peter Mortensen · Accepted Answer · 2013-07-10 11:00:30Z

According to the UI dialog documentation, the dialog plugin generates something like this:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div class="ui-dialog-content ui-widget-content" id="dialog_style1">
      <p>One content</p>
   </div>
</div>

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.

orip · Accepted Answer · 2009-08-20 20:21:36Z

2

The standard way to do this is with jQuery UI's CSS Scopes:

<div class="myCssScope">
   <!-- dialog goes here -->
</div>

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.

answered Aug 20, 2009 at 20:21

orip

76k21 gold badges120 silver badges150 bronze badges

Comments

Bakudan · Accepted Answer · 2012-04-29 00:12:28Z

1

You can add the class to the title like this:

$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');

edited Apr 29, 2012 at 0:12

Bakudan

19.5k9 gold badges56 silver badges76 bronze badges

answered Aug 20, 2009 at 19:45

Daniel Moura

7,9845 gold badges38 silver badges61 bronze badges

3 Comments

Rio Over a year ago

right, but .ui-dialog-titlebar doesn't have the class .dialog1. .dialog1 {display:none;} will hide the entire contents of the dialog box, which I don't want.

Daniel Moura Over a year ago

Where is .ui-dialog-titlebar?

Daniel Moura Over a year ago

ok. I was looking at jqModal (dev.iceburg.net/jquery/jqModal) and wasn't finding it.

Peter Mortensen · Accepted Answer · 2013-07-10 11:04:42Z

0

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.

edited Jul 10, 2013 at 11:04

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 20, 2009 at 20:09

Pawel Krakowiak

10.1k4 gold badges42 silver badges55 bronze badges

2 Comments

Rio Over a year ago

Yup. It doesn't work, I've tried, using Firebug as well. That's why I posted ;-)

Rio Over a year ago

The whole issue is .ui-dialog-titlebar wraps around #dialog_style1, so while #dialog_style1 applies nicely to the content of the dialog box, it doesn't apply to the title itself.

Collectives™ on Stack Overflow

jQuery UI Dialog individual CSS styling

8 Answers 8

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related