【图】利用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=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