DIV CSS 佈局教程網

模態對話框是，當彈出對話框時後面的內容無法操作。本次利用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>