弹出层,背景变暗,禁用滚动条

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);   //弹出提示信息