ajax+div实现漂亮的弹出框

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
* @author yulw
**/
%>
<%--工单被起草次数统计 --%>
<%
String flowID = (String)request.getParameter("flowID");
String sql = "select count(*) from flow_instance_names where flow_id='"+flowID+"'";
ResultSet rs = Dber.executeQuery(sql,"查询工单被起草次数");
int count = 0;
while(rs.next()){
count = rs.getInt(1);
}
System.out.println("该工单总共被起草了"+count+"次。

");
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
out.println("<root><count>"+count+"</count></root>");
%>
前台jsp中的ajax处理：
if(xmlHttp.readyState==4){
if(xmlHttp.status == 200){
var xmlDoc = xmlHttp.responseXML.documentElement; if(xmlDoc == null){
alert("xmlDoc is null!");
}else{
var count =
xmlDoc.getElementsByTagName("count")[0].childNodes[0].nodeValue;
document.getElementById("tongji").innerHTML = '该工单总共被起草了'+count+'次。

';
}
}
}
前台jsp页面必备的页面元素：
<!-- 弹出窗专用 begin-->
<div id="massage_boxbb">
<div class="massage">
<div class="header" onmousedown=MDown(massage_boxbb)>
<div style="display:inline; width:150px;
position:absolute">工单被点击次数统计</div>
<span
onClick="massage_boxbb.style.visibility='hidden';
maskaa.style.visibility='hidden'" style="float:right; display:inline; cursor:hand"><font size='4'>×</font></span>
</div>
<ul style="margin-right:25">
<li><span id='tongji'></span></li>
</ul>
<center><span
onClick="massage_boxbb.style.visibility='hidden';
maskaa.style.visibility='hidden'" style="float:center; display:inline; cursor:hand"><input type="button" value="关闭" /></span></center>
</div>
</div>
<div id="maskaa"></div>
<!-- 弹出窗专用 end-->
前台jsp中的弹出窗移动js：
<!--实现层移动-->
<script language="javascript">
var Obj=''
document.onmouseup=MUp
document.onmousemove=MMove
function MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.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).releaseCapture();
Obj='';
}
}
</script>
层样式：直接放在head里
<style type="text/css">
a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:underline}
body{overflow:hidden}
#massage_boxbb{ position:absolute;
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}
.massage{border:#7DAFD7 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px;
line-height:150%}
.header{background:#7DAFD7; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff} </style>
最终效果图：。