div弹出窗口可拖动

于 2009-02-25 13:07:00 发布
阅读量2.2k 收藏 1
点赞数
文章标签： div function website filter date html

 

/* 
* 创建弹出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);  
}  

 

快乐无边
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值