Question

我在我正在开发的项目中使用Blueprint和jQuery UI / jQuery 1.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 =＆＃34; jquery_elem＆＃34;来包装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索引导致图像不显示。我在jquery-ui.css的第876行的.ui-widget-overlay类中添加了一个z-index来修复问题。

mvc jquery模态弹出对话框ui-widget-overlay问题

1 个答案: