JavaScript弹出Div层(嵌入文字)- 可拖动+最小化
2010-08-02 19:46
441 查看
<input type="button" onclick="fs()" /> <mce:script language="javascript" type="text/javascript"><!-- function fs() { var a = new DivWindow("1","窗口测试",580,400,"Welcome to visited my personal website:<br><a href="http://www.qqview.com" mce_href="http://www.qqview.com" target=_blank>http://www.qqview.com</a><br><ahref=http://www ... qqview.com</a><br><br>thx!!!=)..."); a.setPopupTopBgColor("black","blue","white","white","black"); a.open(); } 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); } // --></mce:script>
相关文章推荐
- JavaScript弹出Div层(嵌入文字)- 可拖动
- JavaScript弹出Div层(嵌入网页) -可拖动
- javascript div 弹出可拖动窗口
- javascript div 弹出可拖动窗口
- 用Javascript弹出div定义的消息框并往块里面填写文字
- 点击按钮/文字弹出背景变暗的可拖动的DIV提示层
- 用div实现弹出窗口,拖动,最大化,最小化,关闭
- javascript 可以拖动的DIV(二)
- javascript 通过封装div方式弹出div窗体
- 利用javascript修改某div上的文字内容
- [收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
- Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现
- DivCSS+JavaScript实现 始终居中的半透明弹出层
- JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
- 纯CSS实现圆角、可拖动的一个DIV弹出层
- javascript用DIV模拟弹出窗口_窗体滚动跟随
- JAVASCRIPT弹出DIV
- Javascript实现div的鼠标拖动
- (html/javascript)可以用鼠标自由拖动的div(收藏)
- DIV模拟弹出窗口(支持拖动)