ajax div实现漂亮的弹出框

1、2009-12-13 15:28后台jsp处理程序：<% page contentType="text/html; charset=GBK" %><% page import="com.sxmcc.framework.core.*"%><% page import="java.util.*,com.dhcc.workflow.database.Dber,java.sql.*"%><%    /* time：2009-12-13   &

2、#160; * author yulw     */%><%-工单被起草次数统计 -%><%    String flowID = (String)request.getParameter("flowID");    String sql = "select count(*) from flow_instance_names where flow_id='"+flowID+"'" 

3、60;  ResultSet rs = Dber.executeQuery(sql,"查询工单被起草次数");    int count = 0;    while(rs.next()        count = rs.getInt(1);        System.out.println("该工单总共被起草了"+count+"次。"

4、);    response.setContentType("text/xml; charset=UTF-8");    response.setHeader("Cache-Control", "no-cache");    out.println("<root><count>"+count+"</count></root>");%>前台jsp中的aja

5、x处理：if(xmlHttp.readyState=4)         if(xmlHttp.status = 200)                 var xmlDoc = xmlHttp.responseXML.documentElement;         

6、;       if(xmlDoc = null)                         alert("xmlDoc is null!");           

7、;      else                         var count = xmlDoc.getElementsByTagName("count")0.childNodes0.nodeValue;      &

8、#160;                  document.getElementById("tongji").innerHTML = '该工单总共被起草了'+count+'次。'                 &

9、#160;       前台jsp页面必备的页面元素：<!- 弹出窗专用 begin-><div id="massage_boxbb">     <div class="massage">           <div class="header" onmousedown=MDown(massag

10、e_boxbb)>                <div style="display:inline; width:150px; position:absolute">工单被点击次数统计</div>                

11、0;    <span onClick="massage_boxbb.style.visibility='hidden' maskaa.style.visibility='hidden'" style="float:right; display:inline; cursor:hand"><font size='4'>×</font></span>      &#

12、160;         </div>                <ul style="margin-right:25">                 

13、60;     <li><span id='tongji'></span></li>                </ul>               <center><s

14、pan onClick="massage_boxbb.style.visibility='hidden' maskaa.style.visibility='hidden'" style="float:center; display:inline; cursor:hand"><input type="button" value="关闭" /></span></center>    </div></

15、div><div id="maskaa"></div><!- 弹出窗专用 end->前台jsp中的弹出窗移动js：<!-实现层移动-><script language="javascript">var Obj=''document.onmouseup=MUpdocument.onmousemove=MMovefunction MDown(Object)Obj=Object.iddocument.all(Obj).setCapture()pX=event.x-document

16、.all(Obj).style.pixelLeft;pY=event.y-document.all(Obj).style.pixelTop;function MMove()if(Obj!='')    document.all(Obj).style.left=event.x-pX;    document.all(Obj).style.top=event.y-pY;function MUp()if(Obj!='')    document.all(Obj).releaseC

17、apture();    Obj=''</script>层样式：直接放在head里<style type="text/css">   a color:#000; font-size:12px;text-decoration:none   a:hover color:#900; text-decoration:underline   bodyoverflow:hidden   #massage_boxbb position:ab

18、solute; left:expression(body.clientWidth-350)/2); top:expression(body.clientHeight-200)/2); width:220px; height:120px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden   #maskaa position:absolute; top:0; left:0; width:expression(body.scrollWidth); height:expression(body.scrollHeight);filter:ALPHA(opacity=60); z-index:1; visibility:hidden   .massagebord