aspx页面用一个遮罩层显示正在加载,加载完后隐藏该div
2014-12-24 16:55
519 查看
已经有好一段时间没有使用.NET控件做web了,今天要优化一个界面,正好是用.NET控件做的,遂把此次解决问题的方案下来。
总是有许多开发人员觉得做东西没思路,我觉得只是见得少了,思考少了的缘故,所以我总是喜欢以写博客的方式记录下来平时工作中遇到的一些问题,并附上解决方案。
需求:界面查询操作比较费时,用一个遮罩层显示操作正在执行,当操作执行完之后,关闭遮罩层。
思路:
1、准备两个div,以嵌套的形式存在,下面的div作为遮罩层,上面的div作为显示用,可以放一个动态图片,再附上几个字——“加载中...”。div默认让其不显示,设置其css样式:display: none;
2、当点击查询时,修改div的css样式让其显示出来,当查询结束后,再把该div隐藏起来,就如此简单。
当然,还有一些细节需要注意,如遮罩层是遮罩整个界面还是只在某一区域实现遮罩效果,我这里是实现区域遮罩,如果要实现整个界面遮罩只要稍微修改下js就可以了。
效果图如下:
Html代码如下:
aspx页面关键代码:
总是有许多开发人员觉得做东西没思路,我觉得只是见得少了,思考少了的缘故,所以我总是喜欢以写博客的方式记录下来平时工作中遇到的一些问题,并附上解决方案。
需求:界面查询操作比较费时,用一个遮罩层显示操作正在执行,当操作执行完之后,关闭遮罩层。
思路:
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 }代码很简单,也加了注释,这里我就不详细解释了。
相关文章推荐
- aspx页面用一个遮罩层显示正在加载,加载完后隐藏该div
- js 鼠标点击一个按钮显示div的浮动框,点击页面其他任何地方后,隐藏浮动框
- 一个页面在运行时,如何在页面上显示“正在运行页面,请稍候”
- 显示和隐藏一个div
- js点击页面其它地方将某个显示的DIV隐藏
- 一个页面在运行时,如何在页面上显示“正在运行页面,请稍候”
- 用scrollTop实现让一个div始终显示在页面的某个地方
- 怎样在页面显示 "正在加载中...."
- 用javascript的ShowModalDialog()函数去显示一个aspx页面时缓存的问题
- 点击页面其它地方将某个显示的DIV隐藏
- Iframe正在加载时显示遮罩层
- JQuery显示隐藏一个DIV
- 多个DIV,显示一个,隐藏其他全部的实现方法
- 点击页面其它地方将某个显示的DIV隐藏(改进)
- 显示或隐藏客户端页面中包含指定文字的DIV 标签
- ComponentArt 动态加载的TreeView, 添加一个新节点后,新节点为什么在页面中不会显示?
- 一个关于弹出登陆框的页面 用遮罩 div
- 怎么在页面还没有加载完成时候,在页面上显示一个:"数据加载中......"
- 实现一个jsp页面2种格式,隐藏部分部件,显示部分部件
- DIV-----js功能,页面隐藏和显示