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 = "&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 < 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 = "&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 < 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) + "'/>&nbsp<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瀏覽器下運行通過。。。。