CSS:
#mask{
width:100%; //宽度
height:100%; //高度
background:#adadad; //背景色
visibility:visible; //初始隐藏
position:absolute; //定位
z-index:1;
top: 0; //距离屏幕上方距离
left: 0; //距离屏幕左边距离
filter:alpha(opacity:80); //透明度,在IE下有效,火狐下失效,所以加上下面一句
opacity:0.8; //火狐下透明度
}
#message{
background:#F0F0F0;
height:50px;
width:200px;
text-align:center;
position:absolute;
z-index:2;
visibility:hidden;
top:40%;
left:40%;
}
JS:
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tt").click(function(){
$("#mask").css({visibility:"visible"}); //将ID为mask的CSS属性改为显示
$("#message").css({visibility:"visible"});//将ID为message的CSS属性改为显示
$("body").css({overflow:"hidden"}); //禁用滚动条
})
})
</script>
页面:
<input id="tt" type="button" />
<div id="message">正在为您下载文件,请稍候....<br />(请不要重复刷新)</div>
<div id="mask"></div>
另一种:
前台:
<div id="mask" style="visibility:hidden;overflow:hidden;">
<div style="background:#000;top:0px;left:0px;position:absolute;width:100%;height:1000px;_filter:alpha(opacity=70);_opacity:0.7;filter:alpha(opacity=70);opacity:0.7; z-index:4;"></div>
<div style="height:25px;width:200px;top:40%;left:40%;position:absolute; z-index:5;border:5px solid #fff; background:#EEEEEe; font-size:15px; text-align:center; font-weight:bold;color:Red;">正在为您下载模板,请稍候......</div></div>
<asp:LinkButton runat="server" ID="yingyong" CommandArgument='<%#Eval("ID") %>' CommandName='<%#Eval("Temmulu")%>'
OnCommand="Btnyingyong_Click" style="color:Red;" OnClientClick="return blockd()" Text="应用模板" ></asp:LinkButton>
JS:
function blockd()
{
if (confirm("您确定要应用该模板吗?"))
{
document.getElementById("mask").style.visibility="visible";
return true;
}
else
{
return false;
}
}
function nonde()
{
document.getElementById("mask").style.visibility="visibility:hidden";
}
后台:
........ //执行传送
Page.ClientScript.RegisterStartupScript(this.GetType(), "somekey", "<script>nonde()</script>"); //传送完成,调用前台JS方法nonde()把弹出层隐藏
Message.Show("下载成功!",this.Page); //弹出提示信息