我想让buton的click事件的结果返回之前,让页面变成灰色,所有的空间都是不可选的状态。而且,做好可以在页面的最中间显示一个图标。然后,在click事件的结果返回以后,在页面上显示结果,并让页面的颜色和可选状态恢复正常。请问怎么实现。这个效果通过ExtJs的控件好像可以实现,但是我现在想不用它的情况下实现。
已经试验过的方法有
1 在Response.Write("<div id=webclose></div>");
在发送请求之前,让页面被半透明的Div盖住,但是提示解析错误。并且,不知道请求返回后怎么让div消失。
2 在HTML中定义一div控件,在发送请求之前,让这个div最大化,请求完成后,让它最小化。
div的大小好像并不受我控制,所以失败。
3 页面被一个大的div围住,然后,在发送请求之前,通过javascript让这个div.disabled = true;
结果是页面并没有变成不可选的状态。请大家帮忙想想办法吧。谢谢。
已经试验过的方法有
1 在Response.Write("<div id=webclose></div>");
在发送请求之前,让页面被半透明的Div盖住,但是提示解析错误。并且,不知道请求返回后怎么让div消失。
2 在HTML中定义一div控件,在发送请求之前,让这个div最大化,请求完成后,让它最小化。
div的大小好像并不受我控制,所以失败。
3 页面被一个大的div围住,然后,在发送请求之前,通过javascript让这个div.disabled = true;
结果是页面并没有变成不可选的状态。请大家帮忙想想办法吧。谢谢。
<body>
<script language="javascript" type="text/javascript"> document.write("<div id='loading_bg' style='position:absolute;z-index:99;width:100%;height:2000px;background-color:#FFFFFF;filter:Alpha(opacity=70);'></div>");
document.write("<div id='loading_logo' style='position:absolute;z-index:100;text-align:center;padding-top:250px;width:100%;line-height:24px;'>loading....<br/><img src='images/initbar.gif' /></div>"); </script>在body结束前加<script language="javascript" type="text/javascript">
document.getElementById('loading_bg').style.display='none';document.getElementById('loading_logo').style.display='none';
</script>
</body>
其中$('xxx')是doucment.getElementById('xxx')的简写
<div id="divMask" style="filter: alpha(opacity=50);opacity:0.5;position:absolute;top:0px;left:0px;z-index:100;width:0px;height:0px; background:#00A0F0;"> </div>
<div id="divPopup" style="position:absolute; padding:2px;background:#FFFFFF; border:1px solid #FF0000; top:0px;left:0px; width:300px;z-index:101;display:none;" >
<table class="title" MoveID="divPopup" style="width:100%;color:yellow; padding:6px;cursor:move" cellspacing="0" cellpadding="6"><tr><td id="popTitle" MoveID="divPopup"></td></tr></table>
<br />
<div id="popContent" style="margin:6px;"></div>
<br />
<div align="center" style="margin-bottom:6px;">
<input type="button" value="确定" name="btnPopupOK" id="btnPopupOK" onclick="top.hideAll()">
</input>
</div>
</div><script type="text/javascript">
var itimeInterval = -1;
var secondRest = 10;
var act = null;
function showPop(title, content, action)
{
secondRest = 10;
var msk = $("divMask");
var p = $("divPopup");
var s = $("divShadowFrame")
msk.style.width = document.documentElement.scrollWidth + "px";
msk.style.height = document.documentElement.scrollHeight + "px";
msk.style.display = "";
p.style.display = "";
p.style.top = (document.documentElement.scrollTop + document.documentElement.clientHeight/2 - p.clientHeight/2) + "px";
p.style.left = (document.documentElement.scrollLeft + document.documentElement.clientWidth/2- p.clientWidth/2) + "px";
$("popTitle").innerHTML = title;
if (content != null) $("popContent").innerHTML = content;
$("btnPopupOK").focus();
act = action;
}function hideAll()
{
var msk = $("divMask");
var p = $("divPopup");
msk.style.width = msk.style.height = "0px";
msk.style.display = 'none';
p.style.display = 'none';
if (act) act();
}
</script>
谢谢大家的回复。在bwangel的提示下,我用下面的JavaScript代码实现了
<!--在要盖住的DIV里面,追加下面的HTML代码:-->
<div id="divMask" style="filter: alpha(opacity=50);opacity:0.5;position:absolute;z-index:100;width:0px; height:0px; background:#FFFFCC;text-align:center;vertical-align:middle ">
<p style=" position:static;position:absolute; top:50%"><img src="..images/loading.gif" style="position:static;position:relative;top:-50%;left:-50%;"/></p></div>
<script type="text/javascript"> var DIV_MSK = "divMaskContainer"; //要盖住的DIV名字
//显示Loding DIV
function showMask(action)
{
// 盖住后显示的Loding DIV
var divMask = document.getElementById("divMask");
// 要盖住的DIV
var divTabCon = document.getElementById(DIV_MSK);
//高度和宽度的设定
divMask.style.width = divTabCon.style.width;
divMask.style.height = divTabCon.style.height;
divMask.style.display = "";
}
//隐藏盖住后显示的Loding DIV,显示原来的DIV
function hideMask()
{
var msk = document.getElementById("divMask");
msk.style.width = msk.style.height = "0px";
msk.style.display = 'none';
}
</script>
然后分别调用showMask()和hideMask()就可以控制MASK DIV的显示和隐藏了。