ModalDIV，模态DIV

/**
 * @package ModalDiv.js
 * @author: 熊水林(xionglb@163.com)
 * @version：版权所有（2008-7-13）
 *
 * 这个包实现的效果是在页面弹出一个DIV，用户只能关闭它之后才能操作其它的HTML组件
 */

var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var isIE = navigator.appName.indexOf("Explorer")>-1 ? true : false;

function ModalDiv(id,html,left,top,width,height,border,bgcolor){
    this.globalMasker = new WholePageMasker();
    var divObj = document.getElementById(id);
    if (!divObj){
       divObj = document.createElement("div");
       set_div_style(divObj,id,left,top,width,height,"absolute","solid 1 #000","default","white");
       if (isIE) {
            divObj.style.filter="alpha(opacity=100)";
        }else{
            divObj.style.opacity=1;
        }
    }
    divObj.style.display='block';
    divObj.style.zIndex='1000';
    divObj.innerHTML = html;
    document.body.appendChild(divObj);
    this.object = divObj;
}
ModalDiv.prototype.cancel = function(){
    this.globalMasker.cancel();
    this.object.style.display = "none";
}
/**
 * 这是一个全屏的DIV，可以使页面上所有的元素不被选中
 */
function WholePageMasker(){
    getBodyScrollSize();
    var globalMaskDiv = document.getElementById("globalDiv");
    if (globalMaskDiv == null){
        globalMaskDiv=document.createElement('div');
        globalMaskDiv.style.display='none';
        globalMaskDiv.style.zIndex='999';
        set_div_style(globalMaskDiv, 'globalDiv', '0px','0px',bodyScrollWidth,bodyScrollHeight,"absolute"," #333333 0px solid","default","darkgray");

        if (isIE) {
            globalMaskDiv.style.filter="alpha(opacity=30)";
        }else{
            globalMaskDiv.style.opacity=30/100;
        }
        document.body.appendChild(globalMaskDiv);
    }
    globalMaskDiv.style.display = "block";
    this.observer = new ShowObserver(globalMaskDiv);
    this.observer.disableTag("SELECT");
}
WholePageMasker.prototype.cancel = function(){
    this.observer.enableTag("SELECT");
    this.observer.object.style.display = "none";
}

/*设置DIV的显式属性*/
function set_div_style(obj,id,top,left,width,height,position,border,cursor,background) {
    obj.id = id?id:null;
    obj.style.top = top?top:'0px';
    obj.style.left = left?left:'0px';
    obj.style.width = width?width:'0px';
    obj.style.height = height?height:'0px';
    obj.style.position = position?position:"static";
    obj.style.border = border?border:"1px #000 solid";
    obj.style.cursor = cursor?cursor:"default";
    obj.style.background = background?background:"";
}

function getBodyScrollSize(){
    bodyScrollWidth = document.documentElement.scrollWidth;
    bodyScrollHeight = document.documentElement.scrollHeight
}

 //---------------------------------------------------------------------------------//
/**
 * 通常，下拉框Select的显示级别很高，会挡住<div>等元素的显示。
 * 要使这些元素正常显示有三种方法：
 *   1. 使select的display隐藏
 *   2. <iframe>优先于select
 *   3. <object>优先于select
 *
 *   这里通过第一种方法，实现Div遮挡Select
*/
function ShowObserver(observer){
   this.object = observer;
   this.hiddenElements = new Array();   //要隐藏的元素数组
   this.disabledElements = new Array();
}
ShowObserver.prototype.hideAll = function(){
     this.hideTag("SELECT");
     this.hideTag("OBJECT");
     this.hideTag("IFRAME");
}
ShowObserver.prototype.hideTag = function(tagName){
    try{
        var elements = document.getElementsByTagName(tagName);
        for (i=0,len=elements.length; i<len; i++){
            var tmpObject = elements[i];
            if (maskOver(tmpObject, this.object)){
                this.hiddenElements.push(tmpObject);
                tmpObject.style.visibility = "hidden";
            }
        }
    }catch(e){
        alert(e.message)
    }
}
ShowObserver.prototype.showAll = function(){
   for (var i=0,len=this.hiddenElements.length; i<len; i++){
       var objTemp = this.hiddenElements[i];
       objTemp.style.visibility = ''
   }
   hiddenElements = new Array();
}
//提高zIndex，以覆盖其它标签
ShowObserver.prototype.promoteTag = function(tagName){
    try{
        var maxZindex = 2;
        var elements = document.getElementsByTagName(tagName);
        for (i=0,len=elements.length; i<len; i++){
            var tmpObject = elements[i];
            if (maskOver(this.object,tmpObject) && this.object!=tmpObject){
               var index = tmpObject.style.zIndex;
               if (index && index>maxZindex){
                  maxZindex = index;
               }
            }
        }
        this.object.style.zIndex = maxZindex+1;
    }catch(e){
        alert(e.message)
    }
}
ShowObserver.prototype.disableTag = function(tagName){
    try{
        var elements = document.getElementsByTagName(tagName);
        var array = new Array(tagName);
        for (i=0,len=elements.length; i<len; i++){
            var tmpObject = elements[i];
            if (maskOver(tmpObject,this.object) && this.object!=tmpObject){
               tmpObject.disabled = true;
               array.push(tmpObject);
            }
        }
        this.disabledElements.push(array);
    }catch(e){
        alert(e.message)
    }
}
ShowObserver.prototype.enableTag = function(tagName){
    for (var i=0,len=this.disabledElements.length; i<len; i++){
        var array = this.disabledElements[i];
        if (array[0] != tagName)  continue;
        for (var j=1,size=array.length; j<size; j++){
           array[j].disabled = false;
        }
    }
}
//----------------------------------------------------------------------------------------
function MovableElement(element){
   element.onmousedown = function(){
      if (event.button == 1){
         this.moving = true;
         this.setCapture();
         this.x0 = event.clientX - element.style.pixelLeft;
         this.y0 = event.clientY - element.style.pixelTop;
      }
   };
   element.onmousemove = function(){
      if (this.moving){
         this.style.cursor = "move";
         this.style.left = event.clientX - this.x0;
         this.style.top = event.clientY - this.y0;
      }
   };
   element.onmouseup = function(){
      this.releaseCapture();
      this.style.cursor = "default";
      this.moving = false;
   }
}