jQueryUI widget overlay custom CSS

Question

Я пытаюсь затемнить наложение виджета ("dialog"), предоставляемое jQueryUI, но безуспешно. Я сузил CSS, используемый jQuery, классу ui.widget-overlay, но, похоже, не смог переопределить CSS jQuery в моей собственной таблице стилей.

Я пробовал $('.ui-widget-overlay').addClass('override'), но мой собственный стиль не загружен (я подтвердил это с помощью инструментов разработчика Chrome). Аналогично, $('.ui-widget-overlay').removeClass('ui-widget-overlay')addClass('override') не действует.

Я также пробовал использовать маркер !important в моей таблице стилей, опять же безрезультатно.

My Fiddle is here. Стандарт CSS jQueryUI гласит:

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

Я хотел бы заменить его следующим образом:

.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

Добавить свой .addClass('override') в диалоговом окне Параметры в open события:

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