欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-01 09:55:50
...
下图是我的设计思路
JavaScript写的一个自定义弹出式对话框代码_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 {
width = 300;
}
if (height {
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 {
//按钮数组
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 = "&nbsp&nbsp";
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 0 && (y + height {
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]);

更为完整实用的代码,包括定义和调用
代码
复制代码 代码如下:


自定义弹出对话框


";
str += "";
str += "";
str += "";
str += "";
str += "
请选择矿种:" + addCheckbox('all','全(不)选','class_all','selectAll(this,\"class_cb\")') + "
" + addCheckbox('class_cb','铋','class_cb1') + " " + addCheckbox('class_cb','钒','class_cb2') + " " + addCheckbox('class_cb','金','class_cb3') + " " + addCheckbox('class_cb','煤','class_cb4') + " " + addCheckbox('class_cb','锰','class_cb5') + " " + addCheckbox('class_cb','钼','class_cb6') + " " + addCheckbox('class_cb','铅','class_cb7') + " " + addCheckbox('class_cb','石膏','class_cb8') + " " + addCheckbox('class_cb','石煤','class_cb9') + " " + addCheckbox('class_cb','锑','class_cb10') + "
" + addCheckbox('class_cb','铁','class_cb11') + " " + addCheckbox('class_cb','铜','class_cb12') + " " + addCheckbox('class_cb','钨','class_cb13') + " " + addCheckbox('class_cb','锡','class_cb14') + " " + addCheckbox('class_cb','锌','class_cb15') + " " + addCheckbox('class_cb','银','class_cb16') + " " + addCheckbox('class_cb','萤石','class_cb17') + " " + addCheckbox('class_cb','铀','class_cb18') + " " + addCheckbox('class_cb','稀土氧化物','class_cb19') + " " + addCheckbox('class_cb','重晶石','class_cb20') + "
" + addCheckbox('class_cb','硼','class_cb21') + " " + addCheckbox('class_cb','磷','class_cb22') + " " + addCheckbox('class_cb','水泥灰岩','class_cb23') + " " + addCheckbox('class_cb','熔剂灰岩','class_cb24') + " " + addCheckbox('class_cb','冶金白云岩','class_cb25') + " " + addCheckbox('class_cb','岩盐','class_cb26') + " " + addCheckbox('class_cb','芒硝','class_cb27') + " " + addCheckbox('class_cb','钙芒硝','class_cb28') + " " + addCheckbox('class_cb','地下水','class_cb29') + " " + addCheckbox('class_cb','地下热水','class_cb30') + "