强人说下asp.net后台提交数据时弹出遮罩层，并且提交完成后自动关闭遮罩层

Question

有没有现成代码或者实例，我学习学习。

Answer 1

用过一个lhgdialog感觉不错
http://www.cnblogs.com/lhgstudio 遮罩层：
http://download.csdn.net/source/2359722点提交按钮页面回发遮罩层自动就关闭了，不用再控制了

Answer 2

提交时显示DIV
<script language="javascript" type="text/javascript">   
  document.write(" <div id='loadDiv' style='padding-top: 250px; padding-left: 350px;font-size:x-large;height:400px'> <span id='loading'> <img src=\"../Images/loader2.gif\"/>请稍候··· </span> </div>");  
  window.onload = function()  
  {   
  document.getElementById("hiddenDiv").style.display="";   
  document.getElementById("loadDiv").parentNode.removeChild(document.getElementById("loadDiv"));   
    
  }   
  </script> 
http://topic.csdn.net/u/20090605/15/4349c3c3-a3ab-4103-bedc-d54f4cbec6d2.html

Answer 3

每天回帖即可获得10分可用分！MARK UP

Answer 4

要用到jquery，jquery.blockUI<div id="loginDiv" style="display:none; cursor: default;"> 
   <div style="margin:4px 0px 0px 0px;"><h3><font style="color:Black">会员登录</font></h3></div>
   <div id="showmessage" style="display:none ;color:Red; text-align:left"></div>
   <table width="300" style="text-align:center;">
<tr>
<td>用户名:</td><td style="text-align:left"><input type="text" id="username" style="width:150px; height:15px;"/>&nbsp;<a href="#">新用户注册</a></td>
</tr>
<tr>
<td>密&nbsp;码:</td><td style="text-align:left"><input type="password" id="userpwd" style="width:150px;height:15px;"/>&nbsp;<a href="#x">忘记密码?</a></td>
</tr>
        <tr>
         <td colspan="2"><input name="" type="checkbox" value="是否保存状态" id="chk"/>是否保存状态</td>
        </tr>
        <tr><td colspan="2"><div id="check_on" style="color:red;"></div></td></tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="yes" value="登录" /> 
<input type="button" id="cancle" value="取消" /> 
</td>
</tr>
   </table>       
</div>

Answer 5

$(document).ready(function(){
//判断复选框
var chbox_ = false;
$("#chk").click(function(){
        if($("#chk").is(":checked")){
             chbox_ = true;
             $("#check_on").html("公共场合慎用此项!").slideDown("slow");
        }
        else
        {
            chbox_ = false;
            $("#check_on").html("").hide();
        }
    });
$("#userLogin").click(function(){
$.blockUI({ message: $('#loginDiv'), css: { width: '300px' } }); 
}); $("#yes").click(function(){
var uName = $("#username").val();
var isValid = false;
var message = "";
if(!uName)
{
message = "<div>用户名不能为空!</div>" ;
isValid = false;
}
else
{
isValid = true;
}
var uPwd = $("#userpwd").val();
if(!uPwd)
{
message += "<div>密码不能为空!</div>" ;
isValid = false;
}
else
{
if(uName)
isValid = true;
}
if(isValid)
{
$.blockUI({ message: "<h1>登录中...</h1>" }); 
            var vd = new Date();
            //验证
            $.get("ChangeLogin.ashx?dt="+vd+"&uemail="+uName+"&pwd="+uPwd+"&chk="+chbox_,function(data){
                if(data=="1"){window.location.reload()}
                else if(data=="2")
                {
                        $("#showmessage").html("").hide();
                        $.blockUI({ message: $('#loginDiv'), css: { width: '300px' } }); 
                        $("#check_on").html("");
                        $("#check_on").html("用户名或密码错误!");
                }
                else
                {
                    alert("请不要重复登录");
                    $.unblockUI(); 
                    clear();
                }
            });
}
else
{
$("#showmessage").html(message)
 .slideDown("slow");
}
}); $("#cancle").click(function(){
$.unblockUI(); 
clear();
});
});
function clear()
{
$("#username").val("");
$("#userpwd").val("");
$("#showmessage").html("")
 .hide();
}

Answer 6

类似的 ExtJs可以实现，主要是Ajax 

Answer 7

方案：（思想：主用用display与zIndex就可以了，d2的zIndex要高于d1的zIndex）
<div id="dMsg" style="display:none">
   <!--遮挡层，display:block-->
    <div id="d1" class="?"></div>
   <!--信息层，display:block-->
    <div id="d2" class="?"></div>
</div>
到时候调的时候就：
客户端(提交) document.getElementById("dMsg").style.displayy="block"
后台端（前台注册js） document.getElementById("dMsg").style.displayy="none"