模式对话框是,当弹出对话框时后面的内容无法操作。本次利用ajax制作的模式对话框并不是浏览器提供的模式对话框,而是通过层和ajax技术实现的虚拟的模式对话框。
首先是样式表
首先是样式表
css 代码
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;
- }
然后是脚本
js 代码
- 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>