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

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

首先是样式表

css 代码

css 代码

1.   
2. .abc{   
3.       position:absolute;   
4.       left:1px;   
5.       top:1px;   
6.       width:1024px;   
7.       height:768px;   
8.       z-index:0;   
9.       background-repeat: repeat;   
10.       background-color:white;   
11.       FILTER: alpha(opacity=60);    
12.       opacity: 0.6;   
13.          
14.          
15.    }   
16.       
17.    .start{   
18.    }   
19.       
20.    .abc1 {   
21.       position:absolute;   
22.       left:350px;   
23.       top:240px;   
24.       width:300px;   
25.       height:100px;   
26.       z-index:0;   
27.    }   

然后是脚本

js 代码

1. var xmlHttp;   
2.   
3.     function createXMLHttpRequest() {   
4.             if (window.ActiveXObject) {   
5.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
6.             }    
7.         else if (window.XMLHttpRequest) {   
8.             xmlHttp = new XMLHttpRequest();   
9.         }   
10.     }   
11.   
12. function forget(){   
13.   
14.     createXMLHttpRequest();   
15.        
16.     var queryString = "tryAjaxAction.do?";   
17.     queryString = queryString + createString()   
18.       + "&timeStamp=" + new Date().getTime();   
19.     xmlHttp.onreadystatechange = doForget;   
20.     xmlHttp.open("GET", "forget.jsp", "true");   
21.     xmlHttp.send(null);   
22.         
23. }   
24.   
25. function doForget(){   
26.     if(xmlHttp.readyState == 4) {   
27.         if(xmlHttp.status == 200) {   
28.          var layer = document.getElementById("Layer1");   
29.          layer.className = "abc";   
30.          var layer2 = document.getElementById("Layer2");   
31.          layer2.className = "abc1";   
32.          layer2.innerHTML = xmlHttp.responseText;   
33.         }    
34.    ｝   
35. }  

页面内容

xml 代码

1. <table width="100%" height="587"  border="0">  
2.   <tr>  
3.     <td height="138" colspan="3">    
4.     <div id="Layer1">  
5.         
6.     div>  
7.      <div id="Layer2">  
8.       div>  
9.     td>  
10.   tr>  
11.   <tr>  
12.     <td width="10%" height="137"><div align="center"> div>td>  
13.     <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>  
14.     <td width="13%"> td>  
15.   tr>  
16.   <tr>  
17.     <td height="28"> td>  
18.     <td height="28"><html:form method="POST" action="/tryAjaxAction">  
19.     <input type="hidden" name="method" />  
20.     <div id="serverResponse">  
21.        
22.     div>    
23.         <div align="center">  
24.             <SPAN class=col777777><bean:message key="userName">bean:message>SPAN>  
25.             <html:text name="loginForm" property="email">html:text>  
26.             <SPAN class=col777777><bean:message key="password">bean:message>SPAN>  
27.             <html:password name="loginForm" property="password">html:password>  
28.             <html:button property="button" value="提交" onclick="test()">html:button>  
29.                    
30.             <a class="ab" href="#"><bean:message key="regist">bean:message>a>|<a class="ab" onClick="forget()" href="#"><bean:message key="forgetPassword">bean:message>a>  
31.             
32.        div>  
33.     html:form>  
34.         
35.        
36.     td>  
37.     <td height="28"> td>  
38.   tr>  
39.   <tr>  
40.     <td height="80" colspan="3"> td>  
41.   tr>  
42.   <tr>  
43.     <td height="162" colspan="3"> td>  
44.   tr>       
45. table>