mvc jquery模态弹出对话框ui小部件覆盖问题

Question

我正在使用Blueprint和jQueryUI/jQuery1.11。1与。Net MVC在我正在从事的项目中。

<div id="loading_dialog" class="hide">
    <div class="span-5 prepend-4 prepend-top">
        <img id="progressIndicator" src="@Url.Content("~/loading-image-url-here")" alt="Progress Indicator" />
    </div>
    <span class="span-2 prepend-4 small">&nbsp;&nbsp;Loading...</span>
</div>

这是模式对话框的代码，我在布局页面的部分视图中看到了该对话框。提交表单时，我有以下代码显示弹出窗口：

$('.formSubmit').submit(function () {
    $('body, html').animate({ scrollTop: $('html') });
    $("#loading_dialog").dialog({
        autoOpen: true,
        height: 150,
        width: 400,
        modal: true,
        resizable: false,
        draggable: false,
        position: { my: "center top+100", at: 'top+150', of: ".formSubmit" },
        closeOnEscape: false,
        open: function (event, ui) {
            $(".ui-dialog-titlebar-close").hide();
            $(".ui-dialog-titlebar").hide();
        }
    });
    $('.ui-dialog').wrap('<div class="jquery_elem" />');
    $('.ui-widget-overlay').wrap('<div class="jquery_elem" />');
});

我需要用class="jquery_elem"包装jQuery添加到页面底部的div，因为我选择了jQuery UI的作用域为这个选择器。我使用以下CSS的覆盖：

.ui-widget-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: url("Images/FotoFlexer_Photo.png") repeat;
}   

.ui-dialog {
    z-index: 999 !important;
    position: absolute !important;
    top: 150px !important;    
}

但是，当我单击“提交”按钮时，将显示没有覆盖的对话框。我有另一个模式的错误显示与覆盖，有人能告诉我吗？

Answer 1

今天找到了原因，是覆盖的z索引导致图像无法显示。我在索引中添加了一个z索引。jQueryUI第876行中的ui小部件覆盖类。css来解决问题。