Question

我的动机是在mvc3视图中回发到服务器时创建进度图像。当进程正在运行时，应该弹出带有背景div的进度图像。弹出窗口不应该允许访问页面上的控件。例如我在我的视图中有下拉列表，当我回发progess图像应该来，我不应该允许点击下拉列表。

我已经尝试了很多方法，如果它不是回发但是回发正在发生我能够点击实际的页面控件。但我不应该允许点击。有什么帮助吗？

我尝试的代码是......

<style type="text/css">
.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f7f7f7;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}
.loading
{
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
    setTimeout(function () {
        var modal = $('<div />');
        modal.addClass("modal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left });
    }, 200);
}
$('form').live("submit", function () {
    ShowProgress();
});

<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="loader.gif" alt="" />

Answer 1

你应该使用jquery UI对话框并设置不透明度。你可以在这里找到一些例子 http://jqueryui.com/dialog/#modal-confirmation

在mvc3视图中创建无模式div

1 个答案: