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: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>