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 = '&nbsp;';
 }
 
 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