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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
vue之数据交互实例代码
Jun 20 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python线程信号量semaphore使用解析
2019/11/30 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python实现学生成绩测评系统
2020/06/22 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
配件采购员岗位职责
2013/12/03 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
网吧消防安全制度
2014/01/28 职场文书
团购业务员岗位职责
2014/03/15 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
综治工作心得体会
2014/09/11 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL