Javascriptdiv pop-up clickable window _ javascript tips

Create a div window. /*
* Create a p window.
1. Interface Description: The DivWindow (id, title, width, height, content) constructor creates a pop-up window object.
Parameter: id: the id of the pop-up window;
Title: name of the title in the pop-up window;
Width: The window width.
Height: the height of the pop-up window.
Content: content displayed in the pop-up window

2. Interface Description: closeDivWindow (id) closes the window.
Parameter: id the pop-up window id

3. Interface Description: setPopupTopTitleFontColor (PopupTopTitleFontColor) sets the font color of the title in the pop-up window.
Parameters:

4. Interface Description: setPopupTopBgColor (tBgColor) sets the title background color in the pop-up window.

5. Interface Description: setPopupColor (borderColor, bgColor, tFontColor, cBgColor, and fColor) sets the pop-up window style, including the background of the title bar, the border color of the pop-up window, and the background color of the content form, 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:

Controls the p of the background 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"; // specifies the border color of the prompt window.
Var topDivBgColor = "#6795B4"; // specifies the background color of the title in 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"; // The font color of the title in the pop-up window.
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; // name of the pop-up window
This. message = content; // the pop-up window content.
This. width = w; // The window width displayed.
This. height = h; // The window height displayed.
This. left = (document. body. clientWidth )? (Document. body. clientWidth-this. width)/2: 0; // The position on the left of the screen.
This. top = (document. body. clientHeight )? (Document. body. clientHeight-this. height)/2: 0; // The Position of the pop-up window from the top of the screen
// This. init = init;
// This. init ();
}
// Set the initial value based on the constructor to create a pop-up window
DivWindow. prototype = {
// Set the font color of the title in the pop-up window
SetPopupTopTitleFontColor: function (tFontColor)
{
TitleFontColor = tFontColor;
},
// Set the title background color in the pop-up window
SetPopupTopBgColor: function (tBgColor)
{
TopDivBgColor = tBgColor;
},
// Set the pop-up window style, including the background of the title bar, the border color of the pop-up window, the background color of the content form, and the font color of the content form.
SetPopupColor: function (borderColor, bgColor, tFontColor, cBgColor, fColor)
{
TopDivBorderColor = borderColor;
TopDivBgColor = bgColor;
TitleFontColor = tFontColor;
ContentBgColor = cBgColor;
ContentFontColor = fColor;
},
// Open a pop-up window
Open: function ()
{
Var sWidth, sHeight;
SWidth = document. body. clientWidth;
SHeight = document. body. clientHeight;
Var bgObj = document. createElement ("p ");
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.css Text = styleStr;
Document. body. appendChild (bgObj );
// Gradually darken the background
ShowBackground (bgObj, 25 );

// Pop-up window box background container
Var windowTopBgDiv = document. createElement ("p ");
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;
}
});
// Dialog box in the pop-up window
Var windowTopDiv = document. createElement ("p ");
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 ();
// Define the object;
Var win = windowTopDiv. parentNode;
// Record the mouse and layer position;
X0 = event. clientX;
Y0 = event. clientY;
X1 = parseInt (win. style. left );
Y1 = parseInt (win. style. top );
// Record the color;
// TopDivBgColor = windowTopDiv. style. backgroundColor;
// Change the 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;
}
});
// Double-click the pop-up window
WindowTopDiv. attachEvent ("ondblclick", function (){
MaxOrMinPopupDiv (windowTopOperateSpan, windowContentDiv );
});

// Add a title display in the pop-up window
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 dialog box to minimize and maximize the operation.
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 an operation for closing the window in the pop-up window
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 ("p ");
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 );
}
}

// Maximize or minimize the outgoing 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 ";
}
}
// Gradually darken the background
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 <(endInt/100 ))
{
SetTimeout (function () {this. showBackground (obj, endInt)}, 5 );
}
}
}
// Close the pop-up window
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 );
}