1、用DIV實現(xiàn)彈出窗口.txt你無法改變別人，但你可以改變自己；你無法改變天氣， 但你可以改變心情； 你無法改變生命長度， 但你可以拓展它的寬度。 用DIV實現(xiàn)彈出窗口2008-04-08 11:12/*創(chuàng)建彈出div窗口。1、 接口說明：DivWindow(id,title,width,height,content)建一個彈出窗口對象參數(shù)：titlewidthheightcontentcloseDivWindow(id)關(guān)閉窗口id彈出窗口id4、接口說明：setPopupTopBgColor(tBgColor)設(shè)置彈出窗口標(biāo)題背景顏色5、 接口說明：setPopupColor(borderC

2、olor,bgColor,tFontColor,cBgColor,fColor)設(shè)置彈出窗 口風(fēng)格,包括標(biāo)題欄的背景， 彈出窗口邊框顏色， 內(nèi)容窗體背景顏色，內(nèi)容窗體字 體顏色6、接口說明：open()使用方法：var a = new DivWindow(1,窗口測試,580,400,Welcome to visitedmy personal website:http:/ahref=http:/thx!=).L);a.setPopupTopBgColor(black,blue,white,white,black);a.open();生成的html：控制背景的div，使背景逐漸變暗titleid

3、彈出窗口id；： 彈出窗口標(biāo)題名稱；：彈出窗口寬度：彈出窗口高度： 彈出窗口顯示內(nèi)容2、 接口說明：參數(shù)：3、接口說明：窗口標(biāo)題字體顏色參數(shù)：setPopupTopTitleFontColor(PopupTopTitleFontColor)設(shè)置彈出構(gòu)造函數(shù)，創(chuàng)maxORminclosecontent author Nieger Daidate 2007.11.15*/var isIe = (document.all)?true:false; var moveable=false;var topDivBorderColor =#336699;/ var topDivBgColor =#6795B

4、4;/ var contentBgColor =white;/ var contentFontColor =black;/ var titleFontColor =white; / varindex=10000;/z-index;/創(chuàng)建彈出窗口，構(gòu)造函數(shù)function DivWindow(id,title,w,h,content)this.id = id;/窗口id this.zIndex = index 2;this.title = title;/彈出窗口名稱this.message = content;/彈出窗口內(nèi)容this.width = w;/彈出窗口寬度this.height =

5、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();/根據(jù)構(gòu)造函數(shù)設(shè)定初始值，創(chuàng)建彈出窗口DivWtotype = /設(shè)置彈出窗口標(biāo)題字

6、體顏色setPopupTopTitleFontColor:function(tFontColor)titleFontColor = tFontColor;,/設(shè)置彈出窗口標(biāo)題背景顏色setPopupTopBgColor:function(tBgColor)topDivBgColor = tBgColor;,/設(shè)置彈出窗口風(fēng)格,包括標(biāo)題欄的背景，彈出窗口邊框顏色，內(nèi)容窗體背景顏 色，內(nèi)容窗體字體顏色setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor)提示窗口的邊框顏色 提示窗口的標(biāo)題的背景顏色 內(nèi)容顯示窗口的

7、背景顏色 內(nèi)容顯示窗口字體顏色 彈出窗口標(biāo)題字體顏色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.cre

8、ateElement(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)

9、;/彈出窗口框體背景容器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.sty

10、le.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(windowTopBg

11、Div.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.

12、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)/鎖定標(biāo)題欄;windowTopDiv.setCapture();/定義對象;var win = windowTopDiv.parentNode;/記錄鼠標(biāo)和層位置;x0 = even

13、t.clientX;y0 = event.clientY;x1 = parseInt(win.style.left);y1 = parseInt(win.style.top);/記錄顏色;/topDivBgColor = windowTopDiv.style.backgroundColor;/改變風(fēng)格;/windowTopDiv.style.backgroundColor = topDivBorderColor;win.style.borderColor = topDivBorderColor;moveable = true;);/停止拖動windowTopDiv.attachEvent(on

14、mouseup,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.parentNo

15、de; win.style.left = x1 event.clientX - x0;win.style.top = y1 event.clientY - y0;);/雙擊彈出窗口windowTopDiv.attachEvent(ondblclick,function() maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv); );/增加一個彈出窗口標(biāo)題的顯示var windowTopTitleSpan = document.createElement(span);windowTopTitleSpan.setAttribute(id,w

16、indowTopTitle 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);win

17、dowTopOperateSpan.style.width = 12;windowTopOperateSpan.style.borderWidth = 0px;windowTopOperateSpan.style.color = titleFontColor;/white;windowTopOperateSpan.style.fontFamily = webdings;windowTopOperateSpan.style.cursor = default;windowTopOperateSpan.innerHTML = 0;/最大化或者最小化彈出窗口操作windowTopOperateSpan

18、.attachEvent(onclick,function() maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv););/增加一個彈出窗口關(guān)閉的操作var windowTopCloseSpan = document.createElement(span);windowTopCloseSpan.setAttribute(id,windowTopClose this.id);windowTopCloseSpan.style.width = 12;windowTopCloseSpan.style.borderWidth = 0px;wind

19、owTopCloseSpan.style.color = titleFontColor;/white;windowTopCloseSpan.style.fontFamily = webdings;windowTopCloseSpan.style.cursor = default;windowTopCloseSpan.innerHTML = r;/關(guān)閉窗口windowTopCloseSpan.attachEvent(onclick,function() windowTopDiv.removeChild(windowTopTitleSpan);windowTopDiv.removeChild(wi

20、ndowTopOperateSpan);windowTopDiv.removeChild(windowTopCloseSpan);windowTopBgDiv.removeChild(windowTopDiv);windowTopBgDiv.removeChild(windowContentDiv);document.body.removeChild(windowTopBgDiv);document.body.removeChild(bgObj););/內(nèi)容var windowContentDiv = document.createElement(div);windowContentDiv.s

21、etAttribute(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

22、 = 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;/將內(nèi)容寫入到文件中windowTop

23、Div.appendChild(windowTopTitleSpan);windowTopDiv.appendChild(windowTopOperateSpan);windowTopDiv.appendChild(windowTopCloseSpan);windowTopBgDiv.appendChild(windowTopDiv);windowTopBgDiv.appendChild(windowContentDiv);document.body.appendChild(windowTopBgDiv);/function maxOrMinPopupDiv(windowTopOperateS

24、pan,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;win

25、dowTopOperateSpan.innerHTML = 0;elsewin.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.opacityendInt) 最大或者最小化探出窗口讓背景漸漸變暗setTimeout(function()this.showBackground(obj,endInt),5); elsevar al=parseFloat(obj.style.opacity);al =0.01; obj.style.opacity=a