论坛首页 Web前端技术论坛

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

浏览 7506 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2006-12-14  
模式对话框是,当弹出对话框时后面的内容无法操作。本次利用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-repeatrepeat;   
  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>  
   发表时间:2006-12-15  
挺好!给个良好!
这个也挺好啊!
http://prototype-window.xilinus.com/samples.html#
0 请登录后投票
   发表时间:2006-12-15  
daoger 写道
挺好!给个良好!
这个也挺好啊!
http://prototype-window.xilinus.com/samples.html#

我用了它一个“提示信息”的窗口,它会对我写的css,html有一些影响。比如,我的页面中有两个下拉框,等到它弹出来的时候,那个下拉框就消失了;当它消失那个下拉框就出来了。但是我把一个下拉框的选值传递到另一个时,接受值的下拉框就消失了。似乎它会把这些下拉框的display属性设置成none。不知道为什么,没有深入的研究,
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics