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 相关文章推荐
网上抓的一个特效
May 11 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 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
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
python使用mysql数据库示例代码
2017/05/21 Python
详解Django中间件执行顺序
2018/07/16 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python scatter函数用法实例详解
2020/02/11 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
校园之星获奖感言
2014/01/29 职场文书
学习普通话的体会
2014/11/07 职场文书
教导主任个人总结
2015/03/03 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
python 使用pandas读取csv文件的方法
2022/12/24 Python