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

模式对话框是，当弹出对话框时后面的内容无法操作。本次利用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>

评论

2 楼 hgq0011 2006-12-15  

daoger 写道

挺好！给个良好！
这个也挺好啊！
http://prototype-window.xilinus.com/samples.html#

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

1 楼 daoger 2006-12-15  

挺好！给个良好！
这个也挺好啊！
http://prototype-window.xilinus.com/samples.html#