当页面使用ASP.Net加载或回发时显示加载进度图像
本文关键字:加载 显示 图像 ASP Net | 更新日期: 2023-09-27 18:16:20
我的项目有时加载一个页面需要大约1分钟或更多的时间,所以我想向用户显示一个等待消息或等待状态。
我的项目我有一个login.aspx
页与两个按钮和welcome.aspx
页和clientsDatas.aspx
页和Master
页。
我没有找到一些使用JQuery的方法,比如:
<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();
});
我把它放入母版页,在其他子页的加载方法中,我放入:
if (!IsPostBack)
{
string script = "$(document).ready(function () { $('[id*=bt_submit]').click(); });";
ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
}
但是它不工作。
这是我的CSS:
.modal {
position: fixed;
top: 0;
left: 0;
background-color: black;
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;
}
我可以只把一个代码到我的masterPage,它可以执行每次当子页面的提交按钮被点击?
有谁能帮我吗?因为我有一个母版页和许多子页,我添加了一部分Jquery代码到我的母版的母版表单,当masterForm被提交(当提交是如此之长,它显示等待图像)
添加到masterPage的JQuery代码:
<%-- Start of wating message --%>
<script type="text/javascript">
$("#MasterFormID").submit(function () {
$("body").addClass("loading disp");
$("#modal").addClass("disp");
});
</script>
<div id="modal" class="modal" style="text-align: center">
</div>
<%-- End of wating message --%>
样式:.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('../images/ajax-loader-image.gif')
50% 50%
no-repeat;
}
.loading {
overflow: hidden;
}
.disp {
display: block;
}
注意:我必须导入JQuery到我的主页。
我这样做了,效果很好