作家
登录

javascript div 弹出可拖动窗口

作者: 来源:www.28hudong.com 2013-03-30 02:43:13 阅读 我要评论

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

  推荐阅读

  javascript radio 联动效果

<script> function checkradio(o,x){ document.getElementsByName("inptB")[x-1].checked=o.checked } </script> <input name="inptA" type="radio" id="inptA" onclick="checkradio(this,1)">aaa <input name="in>>>详细阅读


本文标题:javascript div 弹出可拖动窗口

地址:http://www.17bianji.com/kaifa2/JS/28941.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)