下拉框体选择后出现遮盖层将页面遮盖住，等程序运行完成后遮盖层消失
0
悬赏园豆：200
[已解决问题]
解决于 2009-12-17 13:00
页面上有个下拉框，当选择项改变的时候会去后台查询一堆数据，大概需要4－5秒左右，现在需要实现的是当选择项改变时，页面上出现一个遮盖层，当数据查询完并绑定页面后，遮盖层消失。请大家帮忙解决下，由于比较急，所以有Demo代码最好 谢谢
最佳答案
0
用什么语言处理的，要是asp.net的话，搞个updatepanel把下拉列表抱起来，定义一个div放到updateprogress里面就ok了，updateprogress会自动控制的
收获园豆：100
其他回答(2)
0
javascript
html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function ShowDIV()
{
var div=document.getElementById("div_show");
div.innerHTML="<div>Loading </div>";
}
function ShowSelectProcess ()
{
var div=document.getElementById("div_show");
var top=document.getElementById("div_show").clientTop;
var left=document.getElementById("div_show").clientLeft;
var width=document.getElementById("GridView1").offsetWidth;
var height=document.getElementById("GridView1").offsetHeight;
div.innerHTML="<div style='width:"+width+"px;height:"+height+"px;text-align:center;color:red;border:1px solid red;vertical-align:middle;background-color:#f1f1f1;opacity:0.15;'>Loading </div>";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
onchange="ShowSelectProcess()">
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
</asp:DropDownList></div>
<div id="div_show" style="vertical-align:middle; ">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class SelectDIV : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
string mm = "页面上有个下拉框，当选择项改变的时候会去后台查询一堆数据，大概需要4－5秒左右";
char[] kk = mm.ToCharArray();
GridView1.DataSource = kk;
GridView1.DataBind();
}
}
收获园豆：50
0
用ScriptManager 好和UpdatePanel，我项目中在UpdatePanel中放的repeater,更新的时间在1S到6S不等，刚好跟你的需求一样，关点的问题在于你那个表示进度的div的大小要刚好覆盖你的下拉框
<div id="detailDiv" class="center_div2">
<span class="center_div_tips2">
<img src="../../Utility/Skin/img/loading.gif" alt="" />数据更新中...</span>
</div>
<asp:ScriptManager ID="stmpreorder" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updpreorder" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
onchange="ShowSelectProcess()">
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script language="javascript">
<!--
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler)
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function beginRequestHandler(sender, args) {
document.getElementById('detailDiv').style.display = 'block';
}
function EndRequestHandler(sender, args) {
document.getElementById('detailDiv').style.display = 'none';
}
-->
</script>
收获园豆：50
