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

Question

在我正在从事的项目中，我在.Net MVC中使用Blueprint和jQuery /jQuery1.11.1。

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

但是，当我单击submit按钮时，将出现没有覆盖的对话框。我有另一个错误的模式，显示与覆盖，谁能给我启发吗？

Answer 1

今天发现了这个问题的原因，是覆盖的z索引导致图像无法显示。我在jquery-ui.css的876行的.ui-widget-overlay类中添加了一个z-index来修复问题。