jQuery UI Dialog individual CSS styling

Asked 20/8, 2009 at 19:38 Answered 16/4, 2013 at 20:23

Solved jquery css jquery-ui dialog modal-dialog

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?

Windsail answered 20/8, 2009 at 19:38 Comment(0)

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

Windsail answered 20/8, 2009 at 20:18 Comment(2)

In my case I also had to add $(".ui-dialog-titlebar").removeClass("ui-widget-header") because it was overwriting my background-color. – Catamaran 8/3, 2014 at 19:39

In my case, ui-dialog-content did the trick. $(".ui-dialog-content").addClass("customclass"); – Kirstenkirsteni 2/12, 2014 at 13:43

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

Brothel answered 21/7, 2011 at 21:10 Comment(2)

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. – Lavalley 30/8, 2011 at 6:57

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. – Cameleer 21/11, 2012 at 12:50

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

Windsail answered 20/8, 2009 at 20:18 Comment(2)

In my case I also had to add $(".ui-dialog-titlebar").removeClass("ui-widget-header") because it was overwriting my background-color. – Catamaran 8/3, 2014 at 19:39

In my case, ui-dialog-content did the trick. $(".ui-dialog-content").addClass("customclass"); – Kirstenkirsteni 2/12, 2014 at 13:43

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

Recondition answered 28/8, 2012 at 13:37 Comment(1)

Thanks for adding this answer though the question is a few years old. This helped me! =) – Hydrocortisone 11/2, 2013 at 22:20

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>

Survive answered 16/4, 2013 at 20:23 Comment(1)

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. – Dav 30/11, 2015 at 5:40

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.

Poultryman answered 8/4, 2011 at 12:9 Comment(0)

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.

Hasty answered 20/8, 2009 at 20:21 Comment(0)

You can add the class to the title like this:

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

Greerson answered 20/8, 2009 at 19:45 Comment(3)

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. – Windsail 20/8, 2009 at 19:49

Where is .ui-dialog-titlebar? – Greerson 20/8, 2009 at 19:52

ok. I was looking at jqModal (dev.iceburg.net/jquery/jqModal) and wasn't finding it. – Greerson 20/8, 2009 at 19:58

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.

Histone answered 20/8, 2009 at 20:9 Comment(2)

Yup. It doesn't work, I've tried, using Firebug as well. That's why I posted ;-) – Windsail 20/8, 2009 at 20:10

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. – Windsail 20/8, 2009 at 20:11

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags