利用AJAX实现实现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=col777777><bean:message key="userName"></bean:message></SPAN>   
            <html:text name="loginForm" property="email"></html:text>   
            <SPAN class=col777777><bean: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>