JavaScript 实现可拖动弹出窗口组件

实现一个可拖动的弹出式 div 窗口。

DivWindow 构造函数与参数说明

1、接口说明：DivWindow(id,title,width,height,content) 构造函数，用于创建一个弹出窗口对象。

参数：id 指定弹出窗口的唯一标识符；

title：定义弹出窗口顶部显示的标题名称；

width：设定弹出窗口的宽度数值；

height：设定弹出窗口的高度数值；

content：指定弹出窗口内部显示的具体内容。

窗口控制与样式设置接口

2、接口说明：closeDivWindow(id) 用于关闭指定的弹出窗口。

参数：id 指定需要关闭的弹出窗口标识符。

3、接口说明：setPopupTopTitleFontColor(PopupTopTitleFontColor) 用于设置弹出窗口标题栏字体的颜色。

参数：

4、接口说明：setPopupTopBgColor(tBgColor) 用于设置弹出窗口标题栏的背景颜色。

5、接口说明：setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) 用于设置弹出窗口的整体风格，包括标题栏背景、窗口边框颜色、内容区域背景颜色以及内容区域字体颜色。

6、接口说明：open() 用于显示已创建的弹出窗口。

使用示例与 HTML 结构生成

使用方法示例：

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