javascript div pops up a draggable window_javascript skills

/*
* Create a pop-up div window.
1. Interface description: DivWindow(id,title,width,height,content) constructor, creates a pop-up window object
Parameters: id pop-up window id;
title: pop-up window title name;
width: pop-up window width
height: pop-up window height
content: pop-up window display content

2. Interface description: closeDivWindow(id) closes the window
Parameters: id pop-up window id

3. Interface description: setPopupTopTitleFontColor(PopupTopTitleFontColor) Set the pop-up window title font color
Parameters:

4. Interface description: setPopupTopBgColor(tBgColor) Set the pop-up window title background color

5. Interface description: setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) sets the pop-up window style, including the background of the title bar, the pop-up window border color, the content form background color, and the content form font color

6. Interface description: open()

Usage:
var a = new DivWindow("1","Window Test",580,400,"Welcome to visited my personal website:
http://www.qqview.com


thx!!!=)... "L);
a.setPopupTopBgColor("black","blue","white","white","black");
a.open();

Generated html :

Control the background div to gradually darken the background

title
maxORmin
close

content

@author Nieger Dai
@date 2007.11.15
*/

var isIe = (document.all)?true:false;
var moveable=false;
var topDivBorderColor = "#336699";//The border color of the prompt window
var topDivBgColor = "#6795B4";//The background color of the title of the prompt window
var contentBgColor = "white";// Background color of the content display window
var contentFontColor = "black";//Font color of the content display window
var titleFontColor = "white"; //Pop-up window title font color
var index=10000;// z-index;
//Create a pop-up window, constructor
function DivWindow(id,title,w,h,content)
{
this.id = id;//Window id
this.zIndex = index 2;
this.title = title;//Pop-up window name
this.message = content;//Pop-up window content
this.width = w;//Pop-up window width
this.height = h;//Pop-up window height
this.left = (document.body.clientWidth) ? (document.body.clientWidth - this.width)/2 : 0;//Pop-up window position , the position from the left side of the screen
this.top = (document.body.clientHeight) ? (document.body.clientHeight - this.height)/2 : 0;//Position of the pop-up window, the position from the top of the screen
//this.init = init;
//this.init();
}
//Set the initial value according to the constructor and create a pop-up window
DivWindow.prototype = {
//Set the pop-up window title font color
setPopupTopTitleFontColor:function(tFontColor)
{
titleFontColor = tFontColor;
},
//Set the pop-up window title background color
setPopupTopBgColor: function(tBgColor)
{
topDivBgColor = tBgColor;
},
//Set the pop-up window style, including title bar background, pop-up window border color, content form background color, content form Font color
setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor)
{
topDivBorderColor = borderColor;
topDivBgColor = bgColor;
titleFontColor = tFontColor;
contentBgColor = cBgCol or ;
contentFontColor = fColor;
},
//Open a pop-up window
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);
//Let the background gradually darken
showBackground(bgObj,25);

// Pop-up window frame background container
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;
}
});
// Pop-up window header frame
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;
//Start dragging;
windowTopDiv.attachEvent( "onmousedown",function(){
if(event.button==1)
{
//Lock the title bar;
windowTopDiv.setCapture();
//Definition object;
var win = windowTopDiv.parentNode;
//Record mouse and layer position;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style. left);
y1 = parseInt(win.style.top);
//Record color;
//topDivBgColor = windowTopDiv.style.backgroundColor;
//Change style;
/ /windowTopDiv.style.backgroundColor = topDivBorderColor;
win.style.borderColor = topDivBorderColor;
moveable = true;
}
});
//Stop dragging
windowTopDiv. attachEvent("onmouseup",function(){
if(moveable)
{
var win = windowTopDiv.parentNode;
win.style.borderColor = topDivBgColor;
windowTopDiv.style.backgroundColor = topDivBgColor;
windowTopDiv.releaseCapture();
moveable = false;
}
});
// Start dragging
windowTopDiv.attachEvent("onmousemove",function( ){
if(moveable)
{
var win = windowTopDiv.parentNode;
win.style.left = x1 event.clientX - x0;
win.style.top = y1 event .clientY - y0;
}
}; Display of a pop-up window title
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;

//Add a pop-up window to minimize and maximize Operations
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";
//Maximize or minimize the pop-up window operation
windowTopOperateSpan.attachEvent("onclick",function(){
maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv );
});

//Add a pop-up window closing operation
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";
// Close the window
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);
});

// content
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 ;

//Write the content to the file
windowTopDiv.appendChild(windowTopTitleSpan);
windowTopDiv.appendChild(windowTopOperateSpan);
windowTopDiv.appendChild(windowTopCloseSpan);
windowTopBgDiv .appendChild(windowTopDiv);
windowTopBgDiv.appendChild(windowContentDiv);
document.body.appendChild(windowTopBgDiv); Window
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";
}
}
//Let the background gradually darken
function showBackground(obj ,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity =1;
if(obj.filters.alpha.opacity{
setTimeout(function(){this.showBackground(obj,endInt)},5);
}
}
else
{
var al=parseFloat(obj.style. opacity);al =0.01;
obj.style.opacity=al;
if(al{ 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);
}