jQueryUI 小部件覆盖自定义 CSS

Question

我试图使 jQueryUI 提供的小部件叠加层 ( "dialog" ) 变暗，但没有成功。我已将 jQuery 使用的 CSS 缩小到 ui.widget-overlay 类，但似乎无法覆盖我自己的样式表中的 jQuery CSS。

我试过 $( '.ui-widget-overlay' ).addClass( 'override' ) 但我自己的样式没有加载(我已经使用 Chrome 的开发者工具确认了这一点).同样，$( '.ui-widget-overlay' ).removeClass( 'ui-widget-overlay' )addClass( 'override' ) 无效。

我也曾尝试在我的样式表中使用 !important 标记，但仍然无济于事。

我的 fiddle 是 here . jQueryUI 标准 CSS 如下:

.ui-widget-overlay { 背景:#aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;不透明度:.3；过滤器:Alpha(不透明度=30)； }

我想用这个替换它:

.ui-widget-overlay { 背景:#222222 50% 50% repeat-x;不透明度:.3；过滤器:Alpha(不透明度=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