jQueryUI widget overlay custom CSS

Question

I'm trying to darken the widget overlay ("dialog") provided by jQueryUI but without success. I've narrowed the CSS used by jQuery to the class ui.widget-overlay, but seem unable to override the jQuery CSS in my own stylesheet.

I've tried $( '.ui-widget-overlay' ).addClass( 'override' ) but my own style isn't loaded (I've confirmed this using Chrome's developer tools). Similarly, $( '.ui-widget-overlay' ).removeClass( 'ui-widget-overlay' )addClass( 'override' ) has no effect.

I've also tried using the !important marker in my stylesheet, again to no avail.

My Fiddle is here. The jQueryUI standard CSS reads as follows:

.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3;filter:Alpha(Opacity=30); }

I'd like to replace it with this:

.ui-widget-overlay { background: #222222 50% 50% repeat-x; opacity: .3;filter:Alpha(Opacity=30); }

HTML

<a href="#" id="advisers-image">
    <div class="circle hovershadow advisers advisers-box-shadow text">Professional
        advisers</div>
</a>

<a href="#" id="industry-image">
    <div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>

<div style="clear: both;"></div>

<div id="advisers-dialog" class="dialog">

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Law firms</a></li>
            <li><a href="#tabs-2">Accounting and audit firms</a></li>
            <li><a href="#tabs-3">Management consultants and economists</a></li>
        </ul>
        <div id="tabs-1">
            <p>Law firm text here.</p>
            <div id="tabs-inner-link"><p>Click <a href="#">here</a> to see how we can give you the edge.</p></div>
        </div>
        <div id="tabs-2">
            <p>Accounting and audit firm text goes here.</p>
        </div>
        <div id="tabs-3">
            <p>Management consultants and economists text goes here.</p>
        </div>
    </div>
</div>

<div id="industry-dialog" class="dialog" title="Industry">Industry
    text goes here</div>

Javascript

$( "#tabs" ).tabs();

var commonDialogOptions={
autoOpen: false,
height: "auto",
modal:true,
width:700
};

$("#industry-dialog, #advisers-dialog").dialog(commonDialogOptions);

$( "#industry-image" ).click(function() {
$( '.ui-widget-header' ).addClass( 'override' );
$( '.ui-widget-header a' ).addClass( 'override' );
$( '.ui-widget-overlay' ).addClass( 'override' );
$( "#industry-dialog" ).dialog( "open" );
});     

$( "#advisers-image" ).click(function() {
$( '.ui-widget-header' ).addClass( 'override' );
$( '.ui-widget-header a' ).addClass( 'override' );
$( '.ui-widget-overlay' ).addClass( 'override' );
$( "#advisers-dialog" ).dialog( "open" );
$( "#tabs" ).tabs( "option", "heightStyle", "content" );
$( "#tabs" ).tabs( 'select', 0 );
});

CSS

.circle {
width: 220px;
height: 220px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
display: inline-block;

/* text styling for circles - see also the .text style below */
font-size: 35px;
color: #FFF;
line-height: 220px;
text-align: center;
font-family: Ubuntu, sans-serif;
}

.dialog {
font-family: 'Istok Web', sans-serif;
font-size: 14px;
line-height: 1.8em;
}

#tabs {
font-family: 'Istok Web', sans-serif;
font-size: 14px;
line-height: 1.8em; 
}

#tabs a:link { font-weight: bold; text-decoration: none; color: #5E2750; }
#tabs a:visited { font-weight: bold; text-decoration: none; color: #5E2750; }
#tabs-inner-link a:hover { text-decoration:underline; }

.advisers {
background: #5E2750;
margin-left: 28%;
margin-right: 13%;
}

.advisers-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}

.industry {
background: #DD4814;
}

.industry-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}

.hovershadow:hover { box-shadow: 0px 0px 4px 4px #AEA79F }

.text { /* used by professional advisers circle */
line-height: 40px;
padding-top: 70px;
height: 150px
}

/* Styles below are overriden styles found in jquery-ui.css */
.ui-widget-header.override { border: 1px solid #ffffff; background: #ffffff; color: #DD4814; font-weight: bold; }
.ui-widget-header.override a { color: #DD4814; }
.ui-widget-overlay.override { background: repeat-x scroll 50% 50% #222222; opacity:0.3; filter:Alpha(Opacity=15); }

Answer 1

Add your .addClass('override') to the dialog options in the open event:

var commonDialogOptions = {
    autoOpen: false,
    height: "auto",
    modal: true,
    width: 700,
    open: function (event, ui) {
        $('.ui-widget-header').addClass('override');
        $('.ui-widget-header a').addClass('override');
        $('.ui-widget-overlay').addClass('override');
    }
};

Fiddle: http://jsfiddle.net/CXhVs/2/

jquery UI open event docs