DIV遮罩层+AJAX异步请求

    <script language="javascript" type="text/javascript">
        var isStrict = document.compatMode == "CSS1Compat";
        jQuery.extend({
            w: function() { var w = isStrict ? document.documentElement.scrollWidth : document.body.scrollWidth; return Math.max(w, $(window).width()); }
 , h: function() { var h = isStrict ? document.documentElement.scrollHeight : document.body.scrollHeight; return Math.max(h, $(window).height()); }
        });
       
        function ShowDIV(thisObjID) {

            $("#BgDiv").css({ display: "block", height: $.h(), $.w() });
            var yscroll = document.documentElement.scrollTop;
            $("#" + thisObjID).css("top", "100px");
            $("#" + thisObjID).css("display", "block");
            document.documentElement.scrollTop = 0;
        }

        function closeDiv(thisObjID) {
            $("#BgDiv").css("display", "none");
            $("#" + thisObjID).css("display", "none");
        }

        function addNewUser() {
       
            $("#msg").show();
            $("#msg").html("数据处理中,请稍后...");
            var geturl = "UserInsert.ashx?user=" + $("#txtUserName").val().toLocaleLowerCase();
            $.get(geturl,function(result) {
                $("#msg").html(result);
                }
            );
        }
 </script>

 <style type="text/css">  
      #BgDiv{background-color:#e3e3e3; position:absolute; margin:0; z-index:9999; left:0; top:0; display:none; border:0; opacity:0.8;filter: alpha(opacity=80);-moz-opacity: 0.8;}
     
      #DialogDiv{ display:none; color:#000000;position:absolute;400px; left:50%; top:50%; margin-left:-200px;  z-index:10000;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
      #DialogDiv h2{ margin:0; height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
      #DialogDiv h2 a{position:absolute; right:5px; font-size:12px; top:0px}
      #DialogDiv .form{padding:10px;}
      #msg{ display:none;color:Red; display:none; margin-top:10px; background-color:#ddd; height:100px; padding:6px 10px; overflow:auto}
  </style>

<body>

<iframe id="BgDiv"></iframe>


<div><input type="button" onclick="ShowDIV('DialogDiv')" value="添加新用户" /></div>
       
 
  <!--遮罩层显示的DIV1-->
  <div id="DialogDiv">
    <h2>添加用户<a href="#" id="btnClose" onclick="closeDiv('DialogDiv')">关闭</a></h2>
   <div class="form">
   <div>
   角色:<asp:DropDownList ID="DropDownList5" runat="server">
<asp:ListItem Text="管理员" Value="0"></asp:ListItem>
<asp:ListItem Text="BA" Value="1"></asp:ListItem>
<asp:ListItem Text="User" Value="2"></asp:ListItem>
</asp:DropDownList>
   用户名:<input id="txtUserName" value="existUser"/>&nbsp;<asp:Button runat="server" Text="添加" OnClientClick="addNewUser();return false"/></div>
   <div id="msg">
   添加失败:当前用户已存在
   </div>
   </div>
  </div>

<!--其他页面内容-->

</body>
原文地址:https://www.cnblogs.com/dashi/p/4034677.html