JavaScript写的一个自定义弹出式对话框代码


Posted in Javascript onJanuary 17, 2010

下图是我的设计思路
JavaScript写的一个自定义弹出式对话框代码
下面是具体的js代码
1,首先定义几个自定义函数
代码

//判断是否为数组 
function isArray(v) 
{ 
return v && typeof v.length == 'number' && typeof v.splice == 'function'; 
} 
//创建元素 
function createEle(tagName) 
{ 
return document.createElement(tagName); 
} 
//在body中添加子元素 
function appChild(eleName) 
{ 
return document.body.appendChild(eleName); 
} 
//从body中移除子元素 
function remChild(eleName) 
{ 
return document.body.removeChild(eleName); 
}

2,具体的窗体实现代码
代码
//弹出窗口,标题(html形式)、html、宽度、高度、是否为模式对话框(true,false)、按钮(关闭按钮为默认,格式为['按钮1',fun1,'按钮2',fun2]数组形式,前面为按钮值,后面为按钮onclick事件) 
function showWindow(title,html,width,height,modal,buttons) 
{ 
//避免窗体过小 
if (width < 300) 
{ 
width = 300; 
} 
if (height < 200) 
{ 
height = 200; 
} 
//声明mask的宽度和高度(也即整个屏幕的宽度和高度) 
var w,h; 
//可见区域宽度和高度 
var cw = document.body.clientWidth; 
var ch = document.body.clientHeight; 
//正文的宽度和高度 
var sw = document.body.scrollWidth; 
var sh = document.body.scrollHeight; 
//可见区域顶部距离body顶部和左边距离 
var st = document.body.scrollTop; 
var sl = document.body.scrollLeft; 
w = cw > sw ? cw:sw; 
h = ch > sh ? ch:sh; 
//避免窗体过大 
if (width > w) 
{ 
width = w; 
} 
if (height > h) 
{ 
height = h; 
} 
//如果modal为true,即模式对话框的话,就要创建一透明的掩膜 
if (modal) 
{ 
var mask = createEle('div'); 
mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:10000;width:" + w + "px;height:" + h + "px;"; 
appChild(mask); 
} 
//这是主窗体 
var win = createEle('div'); 
win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) + "px;background:#f0f0f0;z-index:10001;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;"; 
//标题栏 
var tBar = createEle('div'); 
//afccfe,dce8ff,2b2f79 
tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; 
//标题栏中的文字部分 
var titleCon = createEle('div'); 
titleCon.style.cssText = "float:left;margin:3px;"; 
titleCon.innerHTML = title;//firefox不支持innerText,所以这里用innerHTML 
tBar.appendChild(titleCon); 
//标题栏中的“关闭按钮” 
var closeCon = createEle('div'); 
closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可用 
closeCon.innerHTML = "×"; 
tBar.appendChild(closeCon); 
win.appendChild(tBar); 
//窗体的内容部分,CSS中的overflow使得当内容大小超过此范围时,会出现滚动条 
var htmlCon = createEle('div'); 
htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; 
htmlCon.innerHTML = html; 
win.appendChild(htmlCon); 
//窗体底部的按钮部分 
var btnCon = createEle('div'); 
btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;"; 
//如果参数buttons为数组的话,就会创建自定义按钮 
if (isArray(buttons)) 
{ 
var length = buttons.length; 
if (length > 0) 
{ 
if (length % 2 == 0) 
{ 
for (var i = 0; i < length; i = i + 2) 
{ 
//按钮数组 
var btn = createEle('button'); 
btn.innerHTML = buttons[i];//firefox不支持value属性,所以这里用innerHTML 
// btn.value = buttons[i]; 
btn.onclick = buttons[i + 1]; 
btnCon.appendChild(btn); 
//用户填充按钮之间的空白 
var nbsp = createEle('label'); 
nbsp.innerHTML = "  "; 
btnCon.appendChild(nbsp); 
} 
} 
} 
} 
//这是默认的关闭按钮 
var btn = createEle('button'); 
// btn.setAttribute("value","关闭"); 
btn.innerHTML = '关闭'; 
// btn.value = '关闭'; 
btnCon.appendChild(btn); 
win.appendChild(btnCon); 
appChild(win); 
/*************************************以下为拖动窗体事件*********************/ 
//鼠标停留的X坐标 
var mouseX = 0; 
//鼠标停留的Y坐标 
var mouseY = 0; 
//窗体到body顶部的距离 
var toTop = 0; 
//窗体到body左边的距离 
var toLeft = 0; 
//判断窗体是否可以移动 
var moveable = false; 
//标题栏的按下鼠标事件 
tBar.onmousedown = function() 
{ 
var eve = getEvent(); 
moveable = true; 
mouseX = eve.clientX; 
mouseY = eve.clientY; 
toTop = parseInt(win.style.top); 
toLeft = parseInt(win.style.left); 
//移动鼠标事件 
tBar.onmousemove = function() 
{ 
if(moveable) 
{ 
var eve = getEvent(); 
var x = toLeft + eve.clientX - mouseX; 
var y = toTop + eve.clientY - mouseY; 
if (x > 0 && (x + width < w) && y > 0 && (y + height < h)) 
{ 
win.style.left = x + "px"; 
win.style.top = y + "px"; 
} 
} 
} 
//放下鼠标事件,注意这里是document而不是tBar 
document.onmouseup = function() 
{ 
moveable = false; 
} 
} 
//获取浏览器事件的方法,兼容ie和firefox 
function getEvent() 
{ 
return window.event || arguments.callee.caller.arguments[0]; 
} 
//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件 
btn.onclick = closeCon.onclick = function() 
{ 
remChild(win); 
remChild(mask); 
} 
}

实例调用
str = "看看我的窗体效果"; 
showWindow('我的提示框',str,850,250,true,['地区',fun1,'矿种',fun2]);

更为完整实用的代码,包括定义和调用
代码
<html> 
<head><title>自定义弹出对话框</title> 
<style type ="text/css" > 
.layout 
{ 
width:2000px; 
height:400px; 
border:solid 1px red; 
text-align:center; 
} 
</style> 
<script type="text/javascript"> 
//判断是否为数组 
function isArray(v) 
{ 
return v && typeof v.length == 'number' && typeof v.splice == 'function'; 
} 
//创建元素 
function createEle(tagName) 
{ 
return document.createElement(tagName); 
} 
//在body中添加子元素 
function appChild(eleName) 
{ 
return document.body.appendChild(eleName); 
} 
//从body中移除子元素 
function remChild(eleName) 
{ 
return document.body.removeChild(eleName); 
} 
//弹出窗口,标题(html形式)、html、宽度、高度、是否为模式对话框(true,false)、按钮(关闭按钮为默认,格式为['按钮1',fun1,'按钮2',fun2]数组形式,前面为按钮值,后面为按钮onclick事件) 
function showWindow(title,html,width,height,modal,buttons) 
{ 
//避免窗体过小 
if (width < 300) 
{ 
width = 300; 
} 
if (height < 200) 
{ 
height = 200; 
} 
//声明mask的宽度和高度(也即整个屏幕的宽度和高度) 
var w,h; 
//可见区域宽度和高度 
var cw = document.body.clientWidth; 
var ch = document.body.clientHeight; 
//正文的宽度和高度 
var sw = document.body.scrollWidth; 
var sh = document.body.scrollHeight; 
//可见区域顶部距离body顶部和左边距离 
var st = document.body.scrollTop; 
var sl = document.body.scrollLeft; 
w = cw > sw ? cw:sw; 
h = ch > sh ? ch:sh; 
//避免窗体过大 
if (width > w) 
{ 
width = w; 
} 
if (height > h) 
{ 
height = h; 
} 
//如果modal为true,即模式对话框的话,就要创建一透明的掩膜 
if (modal) 
{ 
var mask = createEle('div'); 
mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:100;width:" + w + "px;height:" + h + "px;"; 
appChild(mask); 
} 
//这是主窗体 
var win = createEle('div'); 
win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) + "px;background:#f0f0f0;z-index:101;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;"; 
//标题栏 
var tBar = createEle('div'); 
//afccfe,dce8ff,2b2f79 
tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; 
//标题栏中的文字部分 
var titleCon = createEle('div'); 
titleCon.style.cssText = "float:left;margin:3px;"; 
titleCon.innerHTML = title;//firefox不支持innerText,所以这里用innerHTML 
tBar.appendChild(titleCon); 
//标题栏中的“关闭按钮” 
var closeCon = createEle('div'); 
closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可用 
closeCon.innerHTML = "×"; 
tBar.appendChild(closeCon); 
win.appendChild(tBar); 
//窗体的内容部分,CSS中的overflow使得当内容大小超过此范围时,会出现滚动条 
var htmlCon = createEle('div'); 
htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; 
htmlCon.innerHTML = html; 
win.appendChild(htmlCon); 
//窗体底部的按钮部分 
var btnCon = createEle('div'); 
btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;"; 
//如果参数buttons为数组的话,就会创建自定义按钮 
if (isArray(buttons)) 
{ 
var length = buttons.length; 
if (length > 0) 
{ 
if (length % 2 == 0) 
{ 
for (var i = 0; i < length; i = i + 2) 
{ 
//按钮数组 
var btn = createEle('button'); 
btn.innerHTML = buttons[i];//firefox不支持value属性,所以这里用innerHTML 
// btn.value = buttons[i]; 
btn.onclick = buttons[i + 1]; 
btnCon.appendChild(btn); 
//用户填充按钮之间的空白 
var nbsp = createEle('label'); 
nbsp.innerHTML = "  "; 
btnCon.appendChild(nbsp); 
} 
} 
} 
} 
//这是默认的关闭按钮 
var btn = createEle('button'); 
// btn.setAttribute("value","关闭"); 
btn.innerHTML = "关闭"; 
// btn.value = '关闭'; 
btnCon.appendChild(btn); 
win.appendChild(btnCon); 
appChild(win); 
/******************************************************以下为拖动窗体事件************************************************/ 
//鼠标停留的X坐标 
var mouseX = 0; 
//鼠标停留的Y坐标 
var mouseY = 0; 
//窗体到body顶部的距离 
var toTop = 0; 
//窗体到body左边的距离 
var toLeft = 0; 
//判断窗体是否可以移动 
var moveable = false; 
//标题栏的按下鼠标事件 
tBar.onmousedown = function() 
{ 
var eve = getEvent(); 
moveable = true; 
mouseX = eve.clientX; 
mouseY = eve.clientY; 
toTop = parseInt(win.style.top); 
toLeft = parseInt(win.style.left); 
//移动鼠标事件 

tBar.onmousemove = function() 

{ 

if(moveable) 

{ 


var eve = getEvent(); 


var x = toLeft + eve.clientX - mouseX; 


var y = toTop + eve.clientY - mouseY; 

if (x > 0 && (x + width < w) && y > 0 && (y + height < h)) 

{ 

win.style.left = x + "px"; 

win.style.top = y + "px"; 

} 

} 

} 

//放下鼠标事件,注意这里是document而不是tBar 

document.onmouseup = function() 

{ 

moveable = false; 

} 


 } 
//获取浏览器事件的方法,兼容ie和firefox 
function getEvent() 
{ 
return window.event || arguments.callee.caller.arguments[0]; 
} 
//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件 
btn.onclick = closeCon.onclick = function() 
{ 
remChild(win); 
if (mask) 
{ 
remChild(mask); 
} 
} 
} 
function addCheckbox(name,value,id,click) 
{ 
var str = "<input type='checkbox' name='" + name + "' value='" + value + "' id='" + id + "' onclick='" + (click == null ? '':click) + "'/> <label for='" + id + "'>" + value + "</label>"; 
return str; 
} 
function show() 
{ 
var str = "<div><div style='border:dotted 1px blue'><table cellspacing='2'>"; 
str += "<tr><td colspan='7' style='text-align:center'>请选择所在地区:" + addCheckbox('all','全(不)选','cities_all','selectAll(this,\"cities_cb\")') + "</td></tr>"; 
str += "<tr><td>" + addCheckbox('cities_cb','长沙市','cities_cb1') + "</td><td>" + addCheckbox('cities_cb','株洲市','cities_cb2') + "</td><td>" + addCheckbox('cities_cb','湘潭市','cities_cb3') + "</td><td>" + addCheckbox('cities_cb','衡阳市','cities_cb4') + "</td><td>" + addCheckbox('cities_cb','益阳市','cities_cb5') + "</td>"; 
str += "<td>" + addCheckbox('cities_cb','常德市','cities_cb6') + "</td><td>" + addCheckbox('cities_cb','岳阳市','cities_cb7') + "</td></tr>"; 
str += "<tr><td>" + addCheckbox('cities_cb','邵阳市','cities_cb8') + "</td><td>" + addCheckbox('cities_cb','郴州市','cities_cb9') + "</td><td>" + addCheckbox('cities_cb','娄底市','cities_cb10') + "</td>"; 
str += "<td>" + addCheckbox('cities_cb','永州市','cities_cb11') + "</td><td>" + addCheckbox('cities_cb','怀化市','cities_cb12') + "</td><td>" + addCheckbox('cities_cb','张家界市','cities_cb13') + "</td><td>" + addCheckbox('cities_cb','湘西自治州','cities_cb14') + "</td></tr>"; 
str += "</table></div><br/><div style='border:dotted 1px blue'><table cellspacing='2'>"; 
str += "<tr><td colspan='10' style='text-align:center'>请选择矿种:" + addCheckbox('all','全(不)选','class_all','selectAll(this,\"class_cb\")') + "</td></tr>"; 
str += "<tr><td>" + addCheckbox('class_cb','铋','class_cb1') + "</td><td>" + addCheckbox('class_cb','钒','class_cb2') + "</td><td>" + addCheckbox('class_cb','金','class_cb3') + "</td><td>" + addCheckbox('class_cb','煤','class_cb4') + "</td><td>" + addCheckbox('class_cb','锰','class_cb5') + "</td><td>" + addCheckbox('class_cb','钼','class_cb6') + "</td><td>" + addCheckbox('class_cb','铅','class_cb7') + "</td><td>" + addCheckbox('class_cb','石膏','class_cb8') + "</td><td>" + addCheckbox('class_cb','石煤','class_cb9') + "</td><td>" + addCheckbox('class_cb','锑','class_cb10') + "</td></tr>"; 
str += "<tr><td>" + addCheckbox('class_cb','铁','class_cb11') + "</td><td>" + addCheckbox('class_cb','铜','class_cb12') + "</td><td>" + addCheckbox('class_cb','钨','class_cb13') + "</td><td>" + addCheckbox('class_cb','锡','class_cb14') + "</td><td>" + addCheckbox('class_cb','锌','class_cb15') + "</td><td>" + addCheckbox('class_cb','银','class_cb16') + "</td><td>" + addCheckbox('class_cb','萤石','class_cb17') + "</td><td>" + addCheckbox('class_cb','铀','class_cb18') + "</td><td>" + addCheckbox('class_cb','稀土氧化物','class_cb19') + "</td><td>" + addCheckbox('class_cb','重晶石','class_cb20') + "</td></tr>"; 
str += "<tr><td>" + addCheckbox('class_cb','硼','class_cb21') + "</td><td>" + addCheckbox('class_cb','磷','class_cb22') + "</td><td>" + addCheckbox('class_cb','水泥灰岩','class_cb23') + "</td><td>" + addCheckbox('class_cb','熔剂灰岩','class_cb24') + "</td><td>" + addCheckbox('class_cb','冶金白云岩','class_cb25') + "</td><td>" + addCheckbox('class_cb','岩盐','class_cb26') + "</td><td>" + addCheckbox('class_cb','芒硝','class_cb27') + "</td><td>" + addCheckbox('class_cb','钙芒硝','class_cb28') + "</td><td>" + addCheckbox('class_cb','地下水','class_cb29') + "</td><td>" + addCheckbox('class_cb','地下热水','class_cb30') + "</td></tr>"; 
str += "</table></div></div>"; 
showWindow('我的提示框',str,850,250,true,['地区',fun1,'矿种',fun2]); 
} 
function selectAll(obj,oName) 
{ 
var checkboxs = document.getElementsByName(oName); 
for(var i=0;i<checkboxs.length;i++) 
{ 
checkboxs[i].checked = obj.checked; 
} 
} 
function getStr(cbName) 
{ 
var cbox = document.getElementsByName(cbName); 
var str = ""; 
for (var i=0;i<cbox.length;i++) 
{ 
if(cbox[i].checked) 
{ 
str += "," + cbox[i].value; 
} 
} 
str = str.substr(1); 
return str; 
} 
function fun1() 
{ 
var str = getStr('cities_cb'); 
alert('你选择的地区为:' + str); 
} 
function fun2() 
{ 
var str = getStr('class_cb'); 
alert('你选择的矿种为:' + str); 
} 
</script> 
</head> 
<body> 
<div class ="layout"></div> 
<div class ="layout"></div> 
<div class ="layout"> 
<input type="button" value="显示" onclick="show()" /> 
</div> 
</body> 
</html>

此脚本在ie,firefox浏览器下运行通过。。。。
Javascript 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
JavaScript QueryString解析类代码
Jan 17 #Javascript
屏蔽Flash右键信息的js代码
Jan 17 #Javascript
JavaScript学习笔记(十)
Jan 17 #Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 #Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 #Javascript
20个非常有用的PHP类库 加速php开发
Jan 15 #Javascript
javascript 特性检测并非浏览器检测
Jan 15 #Javascript
You might like
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
js对象基础实例分析
2015/01/13 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
js实现小星星游戏
2020/03/23 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python装饰器decorator介绍
2014/11/21 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python代码如何注释
2020/06/01 Python
Python 如何创建一个线程池
2020/07/28 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
联想英国官网:Lenovo英国
2019/07/17 全球购物
行政人员工作职责
2013/12/05 职场文书
退休感言
2014/01/28 职场文书
学前班评语大全
2014/05/04 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
超市采购员岗位职责
2015/04/07 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
golang 语言中错误处理机制
2021/08/30 Golang
15个值得收藏的JavaScript函数
2021/09/15 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript