利用AJAX实现实现web页面的模态对话框

【 tulaoshi.com - Web开发 】

模态对话框是，当弹出对话框时后面的内容无法操作。本次利用ajax制作的模太对话框并不是浏览器提供的模太对话框，而是通过层和ajax技术实现的虚拟的模太对话框.

样式表，css代码：

.abc{   
      position:absolute;   
      left:1px;   
      top:1px;   
      width:1024px;   
      height:768px;   
      z-index:0;   
      background-repeat: repeat;   
      background-color:white;   
      FILTER: alpha(opacity=60);    
      opacity: 0.6;   
         
         
   }   
      
   .start{   
   }   
      
   .abc1 {   
      position:absolute;   
      left:350px;   
      top:240px;   
      width:300px;   
      height:100px;   
      z-index:0;   
   }
脚本，javascript代码：

var xmlHttp;   
  
    function createXMLHttpRequest() {   
            if (window.ActiveXObject) {   
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
            }    
        else if (window.XMLHttpRequest) {   
            xmlHttp = new XMLHttpRequest();   
        }   
    }   
  
function forget(){   
  
    createXMLHttpRequest();   
       
    var queryString = "tryAjaxAction.do？";   
    queryString = queryString + createString()   
      + "&timeStamp=" + new Date().getTime();   
    xmlHttp.onreadystatechange = doForget;   
    xmlHttp.open("GET", "forget.jsp", "true");   
    xmlHttp.send(null);   
        
}   
  
function doForget(){   
    if(xmlHttp.readyState == 4) {   
        if(xmlHttp.status == 200) {   
         var layer = document.getElementById("Layer1");   
         layer.className = "abc";   
         var layer2 = document.getElementById("Layer2");   
         layer2.className = "abc1";   
         layer2.innerHTML = xmlHttp.responseText;   
        }    
   }   
}

页面内容，xml代码：

table width="100%" height="587"  border="0"  
  tr  
    td height="138" colspan="3"    
    div id="Layer1"  
        
    /div  
     div id="Layer2"  
      /div  
    td  
  tr  
  tr  
    td width="10%" height="137"div align="center" /div/td  
    td width="77%"div class="img_border"img class="img_border" src="web/images/first_bg.jpg" width="740" height="135" border=0/div/td  
    td width="13%" /td  
  tr  
  tr  
    td height="28" /td  
    td height="28"html:form method="POST" action="/tryAjaxAction"  
    input type="hidden" name="method" /  
    div id="serverResponse"  
       
    /div    
        div align="center"  
            SPAN class=col777777bean:message key="userName"/bean:message/SPAN  
            html:text name="loginForm" property="email"/html:text  
            SPAN class=col777777bean:message key="password"/bean:message/SPAN  
            html:password name="loginForm" property="password"/html:password  
            html:button property="button" value="提交" onclick="test()"html:button  
                   
            a class="ab" href="#"bean:message key="regist"/bean:message/a|a class="ab" onClick="forget()" href="#"bean:message key="forgetPassword"/bean:message/a  
            
       /div  
    /html:form  
        
       
    /td  
    td height="28" /td  
  /tr  
  tr  
    td height="80" colspan="3" /td  
  /tr  
  tr  
    td height="162" colspan="3" /td  
  /tr       
/table