javascript div 弹出可拖动窗口


Posted in Javascript onFebruary 26, 2009

/*
* 创建弹出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 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
JS定时器实例详细分析
Oct 11 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
JavaScript数组常用方法
Mar 02 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
javascript URL锚点取值方法
Feb 25 #Javascript
javascript 特殊字符串
Feb 25 #Javascript
javascript 密码强弱度检测万能插件
Feb 25 #Javascript
javascript 常用代码技巧大收集
Feb 25 #Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 #Javascript
csdn 博客的css样式 v3
Feb 24 #Javascript
javascript web对话框与弹出窗口
Feb 22 #Javascript
You might like
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
简单实现python爬虫功能
2015/12/31 Python
Python selenium文件上传方法汇总
2020/11/19 Python
使用Python对MySQL数据操作
2017/04/06 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
应届毕业生应聘自荐信范文
2014/02/26 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
学生实习证明范文
2014/09/28 职场文书
岳庙导游词
2015/02/04 职场文书
党员个人总结自评
2015/02/14 职场文书
小学生暑假生活总结
2015/07/13 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
windows server2008 开启端口的实现方法
2022/06/25 Servers