javascript div 彈出可拖動視窗

/*
* 建立彈出div視窗。
1、介面說明：DivWindow(id,title,width,height,content) 建構函式，建立一個快顯視窗對象
參數：id 快顯視窗id；
title：快顯視窗標題名稱；
width：快顯視窗寬度
height：快顯視窗高度
content： 快顯視窗顯示內容

2、介面說明： closeDivWindow(id) 關閉視窗
參數： id 快顯視窗id

3、介面說明：setPopupTopTitleFontColor(PopupTopTitleFontColor) 設定快顯視窗標題字型顏色
參數：

4、介面說明：setPopupTopBgColor(tBgColor) 設定快顯視窗標題背景顏色

5、介面說明：setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) 設定快顯視窗風格,包括標題列的背景，快顯視窗邊框顏色，內容表單背景顏色，內容表單字型顏色

6、介面說明：open()

使用方法：
var a = new DivWindow("1","視窗測試",580,400,"Welcome to visited my personal website:<br><a href=http://www.qqview.com target=_blank>http://www.qqview.com</a><br><ahref=http://www ... qqview.com</a><br><br>thx!!!=)..."L);
a.setPopupTopBgColor("black","blue","white","white","black");
a.open();

產生的html：
<div id='"window"+id'></div> 控制背景的div，使背景逐漸層暗
<div id='"windowTopBg"+id'>
<div id='"windowTop"+id'>
<span id='"windowTopTitle"+id'>title</span>
<span id='"windowTopOperate"+id'>maxORmin</span>
<span id='"windowTopClose"+id'>close</span>
</div>
<div id='"windowContent"+id'>content</div>
</div>

@author Nieger Dai
@date 2007.11.15
*/

var isIe = (document.all)?true:false;
var moveable=false;
var topDivBorderColor = "#336699";//提示視窗的邊框顏色
var topDivBgColor = "#6795B4";//提示視窗的標題的背景顏色
var contentBgColor = "white";//內容顯示視窗的背景顏色
var contentFontColor = "black";//內容顯示視窗字型顏色
var titleFontColor = "white"; //快顯視窗標題字型顏色
var index=10000;//z-index;
// 建立快顯視窗，建構函式
function DivWindow(id,title,w,h,content)
{
this.id = id;//視窗id
this.zIndex = index +2;
this.title = title;//快顯視窗名稱
this.message = content;//快顯視窗內容
this.width = w;//快顯視窗寬度
this.height = h;//快顯視窗高度
this.left = (document.body.clientWidth) ? (document.body.clientWidth - this.width)/2 : 0;//快顯視窗位置，距螢幕左邊的位置
this.top = (document.body.clientHeight) ? (document.body.clientHeight - this.height)/2 : 0;//快顯視窗位置，距螢幕上邊的位置
//this.init = init;
//this.init();
}
//根據建構函式設定初始值，建立快顯視窗
DivWindow.prototype = {
//設定快顯視窗標題字型顏色
setPopupTopTitleFontColor:function(tFontColor)
{
titleFontColor = tFontColor;
},
//設定快顯視窗標題背景顏色
setPopupTopBgColor:function(tBgColor)
{
topDivBgColor = tBgColor;
},
//設定快顯視窗風格,包括標題列的背景，快顯視窗邊框顏色，內容表單背景顏色，內容表單字型顏色
setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor)
{
topDivBorderColor = borderColor;
topDivBgColor = bgColor;
titleFontColor = tFontColor;
contentBgColor = cBgColor;
contentFontColor = fColor;
},
//開啟一個快顯視窗
open: function()
{
var sWidth,sHeight;
sWidth=document.body.clientWidth;
sHeight=document.body.clientHeight;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','window'+this.id);
var styleStr="top:0px;left:0px;position:absolute;background:#245;width:"+sWidth+"px;height:"+sHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
bgObj.style.cssText=styleStr;
document.body.appendChild(bgObj);
//讓背景逐漸層暗
showBackground(bgObj,25);

// 快顯視窗框體背景容器
var windowTopBgDiv = document.createElement("div");
windowTopBgDiv.setAttribute('id','windowTopBg'+this.id);
windowTopBgDiv.style.position = "absolute";
windowTopBgDiv.style.zIndex = this.zIndex ;
windowTopBgDiv.style.width = this.width ;
windowTopBgDiv.style.height = this.height;
windowTopBgDiv.style.left = this.left;
windowTopBgDiv.style.top = this.top;
windowTopBgDiv.style.background = topDivBgColor;
windowTopBgDiv.style.fontSize = "9pt";
windowTopBgDiv.style.cursor = "default";
windowTopBgDiv.style.border = "1px solid " + topDivBorderColor;
windowTopBgDiv.attachEvent("onmousedown",function(){
if(windowTopBgDiv.style.zIndex!=index)
{
index = index + 2;
var idx = index;
windowTopBgDiv.style.zIndex=idx;
}
});
// 快顯視窗頭部框體
var windowTopDiv = document.createElement("div");
windowTopDiv.setAttribute('id','windowTop'+this.id);
windowTopDiv.style.position = "absolute";
windowTopDiv.style.background = topDivBgColor;//"white";
windowTopDiv.style.color = titleFontColor;
windowTopDiv.style.cursor = "move";
windowTopDiv.style.height = 20;
windowTopDiv.style.width = this.width-2*2;
//開始拖動;
windowTopDiv.attachEvent("onmousedown",function(){
if(event.button==1)
{
//鎖定標題列;
windowTopDiv.setCapture();
//定義對象;
var win = windowTopDiv.parentNode;
//記錄滑鼠和層位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//記錄顏色;
//topDivBgColor = windowTopDiv.style.backgroundColor;
//改變風格;
//windowTopDiv.style.backgroundColor = topDivBorderColor;
win.style.borderColor = topDivBorderColor;
moveable = true;
}
});
//停止拖動
windowTopDiv.attachEvent("onmouseup",function(){
if(moveable)
{
var win = windowTopDiv.parentNode;
win.style.borderColor = topDivBgColor;
windowTopDiv.style.backgroundColor = topDivBgColor;
windowTopDiv.releaseCapture();
moveable = false;
}
});
// 開始拖動
windowTopDiv.attachEvent("onmousemove",function(){
if(moveable)
{
var win = windowTopDiv.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
});
// 雙擊快顯視窗
windowTopDiv.attachEvent("ondblclick",function(){
maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);
});

//增加一個快顯視窗標題的顯示
var windowTopTitleSpan = document.createElement("span");
windowTopTitleSpan.setAttribute('id','windowTopTitle'+this.id);
windowTopTitleSpan.style.width = this.width-2*12-4;
windowTopTitleSpan.style.paddingLeft = "3px";
windowTopTitleSpan.innerHTML = this.title;

//增加一個快顯視窗最小化，最大化的操作
var windowTopOperateSpan = document.createElement("span");
windowTopOperateSpan.setAttribute('id','windowTopOperate'+this.id);
windowTopOperateSpan.style.width = 12;
windowTopOperateSpan.style.borderWidth = "0px";
windowTopOperateSpan.style.color = titleFontColor;//"white";
windowTopOperateSpan.style.fontFamily = "webdings";
windowTopOperateSpan.style.cursor = "default";
windowTopOperateSpan.innerHTML = "0";
//最大化或者最小化快顯視窗操作
windowTopOperateSpan.attachEvent("onclick",function(){
maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv);
});

//增加一個快顯視窗關閉的操作
var windowTopCloseSpan = document.createElement("span");
windowTopCloseSpan.setAttribute('id','windowTopClose'+this.id);
windowTopCloseSpan.style.width = 12;
windowTopCloseSpan.style.borderWidth = "0px";
windowTopCloseSpan.style.color = titleFontColor;//"white";
windowTopCloseSpan.style.fontFamily = "webdings";
windowTopCloseSpan.style.cursor = "default";
windowTopCloseSpan.innerHTML = "r";
// 關閉視窗
windowTopCloseSpan.attachEvent("onclick",function(){
windowTopDiv.removeChild(windowTopTitleSpan);
windowTopDiv.removeChild(windowTopOperateSpan);
windowTopDiv.removeChild(windowTopCloseSpan);
windowTopBgDiv.removeChild(windowTopDiv);
windowTopBgDiv.removeChild(windowContentDiv);
document.body.removeChild(windowTopBgDiv);
document.body.removeChild(bgObj);
});

// 內容
var windowContentDiv = document.createElement("div");
windowContentDiv.setAttribute('id','windowContent'+this.id);
windowContentDiv.style.background = contentBgColor;
windowContentDiv.style.color = contentFontColor;
windowContentDiv.style.cursor = "default";
windowContentDiv.style.height = (this.height - 20 - 4);
windowContentDiv.style.width = "100%";
windowContentDiv.style.position = "relative";
windowContentDiv.style.left = 0;
windowContentDiv.style.top = 24;

windowContentDiv.style.lineHeight = "20px";
windowContentDiv.style.fontSize = "10pt";
windowContentDiv.style.wordBreak = "break-all";
windowContentDiv.style.padding = "3px";
windowContentDiv.innerHTML = this.message;

//將內容寫入到檔案中
windowTopDiv.appendChild(windowTopTitleSpan);
windowTopDiv.appendChild(windowTopOperateSpan);
windowTopDiv.appendChild(windowTopCloseSpan);
windowTopBgDiv.appendChild(windowTopDiv);
windowTopBgDiv.appendChild(windowContentDiv);
document.body.appendChild(windowTopBgDiv);
}
}

//最大或者最小化探出視窗
function maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv)
{
var win = windowTopOperateSpan.parentNode.parentNode;
var tit = windowTopOperateSpan.parentNode;
var flg = windowContentDiv.style.display=="none";
if(flg)
{
win.style.height = parseInt(windowContentDiv.style.height) + parseInt(tit.style.height) + 2*2;
windowContentDiv.style.display = "block";
windowTopOperateSpan.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
windowTopOperateSpan.innerHTML = "2";
windowContentDiv.style.display = "none";
}
}
//讓背景漸漸層暗
function showBackground(obj,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){this.showBackground(obj,endInt)},5);
}
}
else
{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al<(endInt/100))
{
setTimeout(function(){this.showBackground(obj,endInt)},5);
}
}
}
//關閉快顯視窗
function closeDivWindow(id)
{
var windowTopTitleSpan = document.getElementById("windowTopTitle"+id);
var windowTopOperateSpan = document.getElementById("windowTopOperate"+id);
var windowTopCloseSpan = document.getElementById("windowTopClose"+id);
var windowTopDiv = document.getElementById("windowTop"+id);
var windowTopBgDiv = document.getElementById("windowTopBg"+id);
var windowContentDiv = document.getElementById("windowContent"+id);
var bgObj = document.getElementById("window"+id);

windowTopDiv.removeChild(windowTopTitleSpan);
windowTopDiv.removeChild(windowTopOperateSpan);
windowTopDiv.removeChild(windowTopCloseSpan);
windowTopBgDiv.removeChild(windowTopDiv);
windowTopBgDiv.removeChild(windowContentDiv);
document.body.removeChild(windowTopBgDiv);
document.body.removeChild(bgObj);
}