0

我没有使用 ProgressBar 插件，而是使用下面的脚本来显示异步进度条。页面上的请求。任何人都可以提供反馈，如果它与浏览器兼容等。我上周在 codereview 上提出了这个问题，但没有得到任何回应，所以在这里尝试。

<div class="overlay">
    <div class="progress">
       <img src="@Url.Content("~/content/images/loading.gif")" />Loading...
    </div>
</div>

//displays progress bar
$('.overlay').ajaxStart(function () {
       $(this).css({ height: $(document).height(), width: $(document).width() }).show();
       $(this).find(".progress").css({ top: $(window).height() / 2, left: $(window).width() / 2 });
       }).ajaxStop(function () {
       $(this).hide();
});


.overlay
{
    position: fixed !important;
    position: absolute; /*ie6*/
    width: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #000;
    filter: alpha(opacity=20);
    opacity: 0.2;
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    -webkit-opacity: 0.2;
    z-index: 10004;
    display: none;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); /*ie6*/
}
.overlay .progress
{
    position: absolute;
    z-index: 10005;
    background: #fff;
    color: #000;
}
4

1 回答 1

0

jQuerywidth和height函数在 IE 7-9 中返回零（无法检查旧版本），因此您可以在此处用对象window替换this对象：

$(this)
    .find('.progress')
    .css({
        top: $(this).height() / 2 + 'px',
        left: $(this).width() / 2  + 'px'
    });

您可以this用于计算，因为您的 .overlay 块具有窗口的宽度和高度。

另外，@Url.Content在现代浏览器中失败了，为什么要使用它而不是直接设置路径？

于 2013-05-03T17:15:09.463 回答