下图是我的设计思路
下面是具体的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);
}
}
实例调用
复制代码 代码如下: