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); 
}