JavaScript写的⼀个⾃定义弹出式对话框代码
下图是我的设计思路
下⾯是具体的js代码
1，⾸先定义⼏个⾃定义函数
代码
复制代码代码如下:
//判断是否为数组
function isArray(v)
{
return v && typeof v.length == 'number' && typeof v.splice == 'function';
}
/
/创建元素
function createEle(tagName)
{
ateElement(tagName);
}
//在body中添加⼦元素
function appChild(eleName)
{
return document.body.appendChild(eleName);
}
//从body中移除⼦元素
function remChild(eleName)
{
return veChild(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];
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;
//标题栏的按下⿏标事件
{
var eve = getEvent();
moveable = true;
mouseX = eve.clientX;
mouseY = eve.clientY;
toTop = parseInt(p);
toLeft = parseInt(win.style.left);
//移动⿏标事件
{
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";
p = y + "px";
}
}
}
/
/放下⿏标事件，注意这⾥是document⽽不是tBar
{
moveable = false;
}
}
//获取浏览器事件的⽅法，兼容ie和firefox
function getEvent()
{网站底部代码js特效
return window.event || arguments.callee.caller.arguments[0];
}
/
/顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件
{
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)
{
ateElement(tagName);
}
//在body中添加⼦元素
function appChild(eleName)
{
return document.body.appendChild(eleName);
}
//从body中移除⼦元素
function remChild(eleName)
{
return veChild(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
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论