JS实现弹出层锁定窗口(改进版)

关于NeatDialog这个窗口在网上应该是随处可见了，不知道是哪位高手写的，我这篇文章中提到的锁定窗口也是基于NeatDialog，不过稍微做了些改进，在此要感谢NeatDialog的作者。

在项目中用到了NeatDialog，是结合使用ajaxtag来使用，需求是这样的：
首先在preFunction中调用NeatDialog，盖住页面，是用户无法操作；
然后在postFunction中关闭NeatDialog，使用户可以继续操作；

当使用select联动时，如果是一级联动没什么问题，如果是二级联动就会出现NeatDialog窗口无法关闭的问题

再次看了看NeatDialog，发现每次显示NeatDialog都要new，然后新增Element，关闭是再删除Element；

由于ajaxtag在多级联动时，preFunction和postFunction被调用了多次，所以导致NeatDialog对象新增删除出现了问题

为了解决这个问题，我参照了Yahoo UI的设计思路，即在页面装载或者初始化时，把NeatDialog也装载或者初始化，但是先不显示，当调用show方法时再显示，调用close时将其隐藏（注意不是删除），这样就可以解决上面的问题了。

我觉得这样比原来这种方式更节省资源，毕竟每调用一次就new一个对象，系统开销还是很大的。

为了和之前的NeatDialog加以区别，将其改名为Loader，本来是想做等待窗口的，所以就叫Loader。

部分代码如下：

<SCRIPT type="text/javascript">
Loader = function(sHTML, sTitle, bCancel){
this.elt = null;
if (document.createElement && document.getElementById)
{
var dg = document.createElement("div");
dg.className = "neat-dialog";

sHTML = '<p id=sHTML >' + sHTML + '</p>';

//bCancel = !bCancel;

sHTML = '<div class="neat-dialog-title"><span id=sTitle>' + sTitle +
'</span><img id="nd-cancel" src="x.gif" alt="Cancel" class="nd-cancel" ' +
((bCancel)?'style="display:"':'style="display:none"') + '/>' +
'</div>/n' + sHTML;

sHTML += '<p><div align="center"><img src="rel_interstitial_loading.gif"/></div></p>';

dg.innerHTML = sHTML;

var dbg = document.createElement("div");
dbg.id = "nd-bdg";
dbg.className = "neat-dialog-bg";

var ifrm = '<iframe style="position:absolute;z-index:9;width:expression(this.nextSibling.offsetWidth);'
+ 'height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);'
+ 'left:expression(this.nextSibling.offsetLeft);" frameborder="0" ></iframe>';

var dgc = document.createElement("div");
dgc.id = "nd-dgc";
dgc.className = "neat-dialog-cont";

dgc.appendChild(dbg);

dgc.innerHTML += ifrm;
dgc.appendChild(dg);

//alert(dgc.outerHTML);

//adjust positioning if body has a margin
if (document.body.offsetLeft > 0)
dgc.style.marginLeft = document.body.offsetLeft + "px";

//document.body.innerHTML += ifrm;
document.body.appendChild(dgc);
//if (bCancel) document.getElementById("nd-cancel").onclick = function(){
// this.close();
//};
this.elt = dgc;

this.elt.style.display = "none";
//dgc.focus();
//document.body.style.overflow="visible";
}
};

Loader.prototype.show = function(sHTML, sTitle, bCancel) {
if (this.elt){
document.getElementById("sHTML").innerHTML = sHTML;
if (sTitle) {
document.getElementById("sTitle").innerHTML = sTitle;
} else {
document.getElementById("sTitle").innerHTML = ' ';
}

if(bCancel){
document.getElementById("nd-cancel").style.display = "";
document.getElementById("nd-cancel").onclick = bCancel;
} else {
document.getElementById("nd-cancel").style.display = "none";
}

this.elt.style.display = "";
this.elt.focus();
//this.elt.parentNode.removeChild(this.elt);
document.body.style.overflow="visible";
}
};

Loader.prototype.close = function() {
if (this.elt){
this.elt.style.display = "none";
//this.elt.parentNode.removeChild(this.elt);
document.body.style.overflow="";
}
};

具体例子请参照我论坛中附件内容。

原文地址：http://www.88fly.com.cn/bbs/viewthread.php?tid=38&extra=page%3D1或者http://fireflys.vicp.net/bbs/viewthread.php?tid=38&extra=page%3D1