zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    MySql
    027 mysql
    navicat
    基于阿里云资源的分布式部署方案
    translate(50%,50%) 实现水平垂直居中
    SSH2 协议详解
    DNS服务配置篇 巴哥学Server2003
    Java 8 后的新功能梳理
    IBM Cognos BI 最佳实践系列 网站地址
    jsf2.0 入门视频 教程
  • 原文地址:https://www.cnblogs.com/dashi/p/4034677.html
Copyright © 2011-2022 走看看