aspx页面用一个遮罩层显示正在加载,加载完后隐藏该div
来源:互联网 发布:中国 未来 国运 知乎 编辑:程序博客网 时间:2024/06/06 02:15
已经有好一段时间没有使用.NET控件做web了,今天要优化一个界面,正好是用.NET控件做的,遂把此次解决问题的方案下来。
总是有许多开发人员觉得做东西没思路,我觉得只是见得少了,思考少了的缘故,所以我总是喜欢以写博客的方式记录下来平时工作中遇到的一些问题,并附上解决方案。
需求:界面查询操作比较费时,用一个遮罩层显示操作正在执行,当操作执行完之后,关闭遮罩层。
思路:
1、准备两个div,以嵌套的形式存在,下面的div作为遮罩层,上面的div作为显示用,可以放一个动态图片,再附上几个字——“加载中...”。div默认让其不显示,设置其css样式:display: none;
2、当点击查询时,修改div的css样式让其显示出来,当查询结束后,再把该div隐藏起来,就如此简单。
当然,还有一些细节需要注意,如遮罩层是遮罩整个界面还是只在某一区域实现遮罩效果,我这里是实现区域遮罩,如果要实现整个界面遮罩只要稍微修改下js就可以了。
效果图如下:
Html代码如下:
<div id="MyDiv" class="white_content"> <!--弹出层时背景层DIV--> <div class="loading"> <span style='width: 115px; height: 115px;'> <img src='Images/progress.gif' alt="数据正在加载..." /></span><span class='spnContent'>数据正在加载...</span> </div> </div>Css代码如下:
/*------------------------加载div样式----------------------------------------*/ .loading { z-index: 1001; vertical-align: middle; text-align:center; height:115px; line-height:115px; } .spnContent { vertical-align: 50%; margin-left: 10px; color: red; font-size: 18px; font-weight: bold; } .white_content { display: none; position: absolute; border: 3px solid lightblue; background-color: #CAE4F7; z-index: 9999; -moz-opacity: 0.5; opacity: .50; filter: alpha(opacity=50); vertical-align: middle; top:0px; text-align:center; } .navPoint { color: white; cursor:pointer; font-family: Webdings; font-size: 9pt; } /*-------------------------------------------------------------------------*/js代码如下:
/*-----------------------------加载div-----------------------------------*/ var show_div = 'MyDiv'; //遮罩div的id //弹出隐藏层 function ShowDiv() { var showdiv = document.getElementById(show_div); if (showdiv == undefined) { return; } showdiv.style.width = $(document).width()+"px"; showdiv.style.top = $("#divList").offset().top + "px"; //divList是要指定的div的id,在该div上进行遮罩 showdiv.style.left = $("#divList").offset().left + "px"; //如果要遮罩整个页面:设置遮罩div的高:$(document).height() + "px" 宽:$(document).width()+"px"; showdiv.style.height = $("#divList").height() + "px"; showdiv.style.display = 'block'; }; //关闭弹出层 function CloseDiv() { document.getElementById(show_div).style.display = 'none'; }; /*----------------------------------------------------------------*/function validateInput() { ShowDiv(); __doPostBack("btnSearch", "");}aspx页面关键代码:
<asp:Button ID="btnSearch" runat="server" Text="查 询" CssClass="btn" Font-Bold="True" Height="25px" Width="80px" UseSubmitBehavior="False" OnClick="btnSearch_Click" OnClientClick="return validateInput();" />cs代码:
protected void btnSearch_Click(object sender, EventArgs e) { //省略掉耗时的查询操作代码 ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "HiddenDiv", "CloseDiv();", true); //关闭加载div }代码很简单,也加了注释,这里我就不详细解释了。
3 1
- aspx页面用一个遮罩层显示正在加载,加载完后隐藏该div
- aspx页面用一个遮罩层显示正在加载,加载完后隐藏该div
- 页面显示"页面正在加载中..."
- 页面加载动画,加载完后隐藏动画
- 用div显示页面加载进度条
- 怎样在页面显示 "正在加载中...."
- 进度条加载后显示页面
- 页面未加载完成,显示正在加载的效果
- 写一个显示正在加载的组件
- 页面正在加载中 ...
- 页面加载完再显示DIV中的内容
- Iframe正在加载时显示遮罩层
- Iframe正在加载时显示遮罩层
- 在加载Web页面时显示正在等待的窗体
- 使用jQuery在页面显示完后自动加载
- js加载读取内容及显示与隐藏div
- UIWebView 显示正在加载网页
- jquery让一个div在dom加载完毕15秒后显示,再过15秒后消失
- CocoaPods安装使用心得,分享给墙内的朋友们
- iOS开发虚线画法
- 在云计算资源池上自动部署业务应用的大数据平台组件开发实战
- Java 将图片转二进制再将二进制转成图片
- 主线程和子线程总结
- aspx页面用一个遮罩层显示正在加载,加载完后隐藏该div
- ffmpeg参数中文详细解释
- 征服Spark as a Service
- 树
- android平台上AES,DES加解密及问题
- Ubuntu安装ssh时出现软件包 openssh-server 还没有可供安装的候选者错误
- MySQL Innodb事务编程问题和处理
- sae上使用jieba
- 睡了好久哇