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 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
React组件生命周期详解
Jul 03 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
关于Js中new操作符的作用详解
Feb 21 Javascript
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下打开URL地址的几种方法小结
2010/05/16 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
python封装对象实现时间效果
2020/04/23 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
纪检干部现实表现材料
2014/08/21 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
好好学习保证书
2015/02/26 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
收入证明范本
2015/06/12 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python