模态对话框是，当弹出对话框时后面的内容无法操作。本次利用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>