html鼠标可拖动窗体,javascript div 弹出可拖动窗口
javascript div 弹出可拖动窗口
更新时间:2009年02月26日 21:50:37 作者:
创建弹出div窗口。
/*
* 创建弹出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:http://www.qqview.com
thx!!!=)..."L);
a.setPopupTopBgColor("black","blue","white","white","black");
a.open();
生成的html:
title
maxORmin
close
@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
{
setTimeout(function(){this.showBackground(obj,endInt)},5);
}
}
else
{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al
{
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);
}
相关文章
这篇文章主要介绍了Bootstrap3 input输入框插入glyphicon图标的方法的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了微信小程序多行文本显示...+显示更多按钮和收起更多按钮,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了微信小程序实现商品属性联动选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2019-02-02
javascript中使用css需要注意的地方小结,注意保留字问题。2010-09-09
javascript 打字游戏实现代码,非常不错的效果,功能还不是很完善,喜欢的朋友可以参考下。2010-04-04
这篇文章主要介绍了JS实现仿UC浏览器前进后退效果的实例代码,实现此功能前需要先测试下浏览器,具体实例代码,大家参考下本文2017-07-07
这篇文章主要介绍了关于javascript获取内联样式与嵌入式样式的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了js cookie实现记住密码功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-01-01
数组重复元素如何处理,这是在项目实战中经常遇到的,针对这个问题,下文给出详细解决方法,希望对大家有所帮助2013-12-12
本篇文章主要介绍了详解ES6之用let声明变量以及let loop机制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论
html鼠标可拖动窗体,javascript div 弹出可拖动窗口相关推荐
- javascript div 弹出可拖动窗口
/* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象 参数:id 弹出窗口id: title: ...
- 鼠标移上去后自动会弹出一个框
鼠标移上去后自动会弹出一个框,位置随鼠标位置的改变而改变,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...
- 纯JavaScript实现弹出选择第几个单选按钮
为什么80%的码农都做不了架构师?>>> 纯JavaScript实现弹出选择第几个单选按钮 <div id="a" name="aa&quo ...
- JavaScript - JavaScript自定义弹出对话框
本脚本使用自定义的浮动窗口替代浏览器自己的对话框,效果非常不错.包含Error | Warning | Success | Prompt 四个对话框窗口 兼容性:IE6+ FireFox2+ Oper ...
- html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function locki ...
- css关闭窗口按钮的代码,JS+CSS实现带关闭按钮DIV弹出窗口的方法
这篇文章主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS+CSS实现带关 ...
- html自动弹出窗效果,JavaScript实现弹出窗口效果
本文实例为大家分享了JavaScript实现弹出窗口的具体代码,供大家参考,具体内容如下 思路 1.总体使用两个div,一个作为底层展示,一个做为弹出窗口: 2.两个窗口独立进行CSS设计,通过dis ...
- javascript 控制弹出窗口
前言:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息 .警告.欢迎光顾之类的话或者作者想要特别提示的信息.其 ...
- Asp.Net中用javascript实现弹出窗口永远居中
//Asp.Net中用javascript实现弹出窗口永远居中 function ShowDialog(url) { var iWidth=600; //模态窗口宽度 var iHei ...
最新文章
- 2020 年最值得学习的 5 大 AI 编程语言
- c语言中的字符变量用什么保留字来说明,第1、2章C语言基础练习题
- 如何使得账户密码永不过期
- android透明像素效率,android-非透明像素上的ImageView ColorFilter.夹
- 清华数学能赶超北大?北大数学院士已达8人,清华引进2位菲尔兹奖
- 记录hadoop HDFS与hadoop YARN无法访问问题
- html与markdown互相转换
- Pandas 列索引操作
- 生成整数自增ID(集群主键生成服务)
- bat 判断文件名字含有某些字段_PE文件头及其简单逆向运用
- 《疯狂的程序员》 -- 什么是真正的程序员?
- java简单代码练习
- 新晋院士!顶尖985,迎来新校长!
- 计算机组成原理A原是什么,计算机组成原理(A).doc
- android和手环教程,智能手环怎么连接手机_智能手环连接手机教程
- 自学python能干什么知乎_自学python能干什么
- 人脸识别 ArcFace 实现
- 吴恩达视频-第一门课第2周2.7、2.8节-计算图与使用计算图求导数
- 【统计建模与R软件】第二章 R软件的使用 课本课后习题 答案 解析 代码
- 王兴内部讲话:为什么中国To B企业都活得这么惨
热门文章
- 函数重载导致的二义性
- 2009-09-23 18:04 by 不仅仅是通用权限设计, 3508 visits, 网摘, 收藏, 编辑
- pypy+uwsgi+dango+nginx 简单部署
- dango mysql 的问题
- protools监听_给新手写的万元录音设备选择2020系列(六)监听音箱/耳机
- 《所谓会说话,就是会换位思考》总结
- xpath中的position()函数使用
- 大厂项目实战,让你面试被问到项目时不再哑口无言!
- 动态规划求解机器人有多少种可能的路径
- JAVA 多态,封装,继承