mvc jquery模式弹出对话框ui-widget-overlay问题答案

【问题标题】：mvc jquery modal popup dialog ui-widget-overlay issuemvc jquery模式弹出对话框ui-widget-overlay问题
【发布时间】：2014-08-06 07:46:45
【问题描述】：

我在我正在从事的项目中使用带有 .Net MVC 的 Blueprint 和 jQuery UI/jQuery 1.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;    
}

但是，当我单击提交按钮时，会出现没有覆盖的对话框。我有另一种与叠加层一起显示的错误模式，谁能启发我？

【问题讨论】：

标签： jquery asp.net-mvc popup

【解决方案1】：

今天找到了原因，是叠加层的z-index导致图像不显示。我在 jquery-ui.css 第 876 行的 .ui-widget-overlay 类中添加了一个 z-index 来修复问题。

【讨论】：