模拟弹出消息框

模拟一个弹出消息框，有模式。核心接口是open，即弹出消息框，此方法有三个参数，分别代表消息框的标题，需要显示的内容，客户端提供的其他参数(参数间用分号隔开)。

以下是代码，附件是Demo。

 

 

/**
 * 用层来模拟的消息框，有模式
 */
function DivAlert(){
    
    var _jpanel=new Panel();
    var _panelNode=_jpanel.getNode();
    var _bShow=false; //显示提示框的标志
    var _bInModel=false;  //当前是否处于模式状态
    var _model=null;  // 产出模式的层
    var _dragIns=null; //拖动类对象
    var _params=null;  //客户端提供的参数
    var _modelDom=null; //模式层对象
    var _table="<table cellpadding=3 cellspacing=0 style='border-width:1px;border-style:solid;border-color:#eeeeee;background-color:white;width:400px;height:auto;border:1px;background-image:url('bg.gif');background-repeat:repeat-x;'><tr><td style='background-color:#F8F8FF'></td><td style='background-color:#F8F8FF' align='right'><img style='cursor:hand' src='clo.jpg' title='关闭'></td></tr><tr><td style='padding-top:5px' colSpan=2><TABLE cellspacing=0 cellpadding=3><tr><td style='padding-left:3px;'><img align='absmiddle' src='warn.jpg' border=0></td><td noWrap=true></td></tr><tr><td>&nbsp;</td></tr></TABLE></td></tr><tr><td align=center style='padding-bottom:10px'><button>确定</button>&nbsp;<button>取消</button></td></tr></table>"
    _panelNode.innerHTML=_table;
    
    var _domBar=_panelNode.children[0].rows[0] ; //标题栏
    var _domTableContainer=_panelNode.children[0].rows[1].cells[0].children[0];
    var _domContent=_domTableContainer.rows[0].cells[1]; //需要显示的内容
    var _domBtn=_panelNode.children[0].rows[2].cells[0].children[0]; //确定按钮
    var _domClose=_domBar.cells[1].children[0];  //关闭按钮
    var _domCancel=_panelNode.children[0].rows[2].cells[0].children[1]; //取消按钮
     _domClose.onclick=close; //关闭层
     _domBtn.onclick=click;  //确定按钮事件
     _domCancel.onclick=close; //取消按钮事件

   function click(){
       _jpanel.setVis(false);
       if(_bInModel){
           if(_modelDom!=null){
               _modelDom.style.display="none";
           }
       }
       //执行自定义的确定动作，由客户端提供
       if(typeof(window.confirmFct)!="undefined"){
           window.confirmFct();
       }
       _bInModel=false;
   }



    //打开提示框
    this.open=function open($title,$content,$params){
        _params=parseParams($params);
         _panelNode.style.left=document.body.clientWidth/2-120;
         _panelNode.style.top=document.body.clientHeight/2-150;
        _domTableContainer.style.height="auto";
        _domTableContainer.style.width="200px";
        setTitle($title);
        setModel(); //设置模式
        _panelNode.style.zIndex=_modelDom.style.zIndex+1;
        _jpanel.setVis(true);
        setContent($content);
        _domBar.style.cursor="hand";
        try{
               //在这里增加拖动
              //_dragIns = new 拖动类();  TODO
        }catch(e){
            alert(e.description);
        }
        _bShow=true;
    };
    //关闭提示框
    this.close=function close(){
        _jpanel.setVis(false);
        if(_bInModel){
            if(_modelDom!=null){
                _modelDom.style.display="none";
            }
        }
        _bInModel=false;
    };
    //设置提示框的标题
    this.setTitle=function setTitle($title){
        _domBar.cells[0].style.fontSize="12px";
        _domBar.cells[0].style.fontWeight="bold";
        _domBar.cells[0].innerText=$title;
    }
    //设置提示框需要显示的内容
    this.setContent=function setContent($content){
        if(_params['nowrap']!=null){  //提供的内容要求换行
            var reg = new RegExp(";","g");
            $content=$content.replace(reg,"<br>");
        }
        _domContent.innerText=$content;
    }
    //判断提示框是否打开
    this.isOpen=function(){
        return _panelNode.style.visiblity=="visible";
    }
    this.getNode=function(){
        return _panelNode;
    }
    //为body设置模式
    this.setModel=function setModel(){
        if(_model==null){
            _model="<div style='background-color:#ddd;z-index:1000;display:none;position:absolute;filter:Alpha(opacity:50);top:0;left:0;float:left;' id='bodyModel'></div>";
        }
        document.body.insertAdjacentHTML("beforeEnd",_model);
        if(_modelDom==null){
            _modelDom=document.getElementById("bodyModel");
        }
        fixModelLayer();
        _modelDom.style.display="";
        _bInModel=true;
    }
    this.getModelDom=function(){
        if(_modelDom!=null){
            return _modelDom;
        }
    }

    //修正层的大小
    this.fixModelLayer=function fixModelLayer(){
        if(_modelDom==null){
            return;
        }
        if(document.body.scrollLeft>0){
           _modelDom.style.width=window.screen.availWidth + document.body.scrollLeft+ "px";
        }else{
            _modelDom.style.width=document.body.clientWidth+ "px";
        }
        if(document.body.scrollTop>0){
            _modelDom.style.height=window.screen.availHeight + document.body.scrollTop+ "px";
        }else{
            _modelDom.style.height=document.body.clientHeight+ "px";
        }
    }
    //层移动时同时改变模式的大小
    this.changeModelPos=function changeModelPos(){
        if(_modelDom==null){
            return;
        }
        var st=document.body.scrollTop;
        var sw=document.body.scrollLeft;
        if(st!=0){
            _modelDom.style.height=document.body.clientHeight + st + "px";
        }else{
             _modelDom.style.height=document.body.clientHeight + "px";
        }
        
        if(sw!=0){
            _modelDom.style.width=document.body.clientWidth + sw + "px";
        }else{
            _modelDom.style.height=document.body.clientWidth + "px";
        }
    }
}
var _divAlert = new DivAlert();
//拖动提示框的同时调整模式层的大小
function withDrag(){ 
    _divAlert.changeModelPos();
}

//产生一个外围面板
function Panel(){
var _sHtml = "<div style='position:absolute; left:2px; top:2px;z-index:199;color:black;visibility:hidden'></div>";
  var _node = createSpanHTML(_sHtml);

  document.body.insertAdjacentElement("beforeEnd", _node);
 
  //get insert node
  this.getNode = function() {
    return _node;
  };
 // show or hide the layer
 this.setVis = function($bType) {
    _node.style.visibility = $bType?"visible":"hidden";
    _node.style.display = $bType?"":"none";
  };
}

function createSpanHTML($html){
  var node = document.createElement("SPAN");
  node.innerHTML = $html;
  return node.children[0];
}

//解析由分号分隔的参数，格式如nowrap=true;height=100;width=100
function parseParams($params){
  var reg = /([^\=\;]*)\=([^\;]*)/gi;
  var rt = [];
  if ($params==null)
    return rt;
  var ar = $params.match(reg);
  var t = null;
  for (var i=0; i<ar.length; i++) {
    t = ar[i].split("=");
    if (t[1].toUpperCase()=="TRUE") {
      rt[t[0]] = true;
    }else {
      rt[t[0]] = t[1];
    }
  }
  return rt;
}

 

 程序中拖动层的方法还没提供。用IE调试通过，没试过其他浏览器。

必须注意的一点是，在Demo中，调用接口open的代码必须在</body>之后，否则会有document.body不是对象的bug，不知道是不是IE的问题，我调试用IE7。

另外，创建模式的层的大小必须随着提示框的位置而变化（如果提示框被拉出当前窗口之外，即出现垂直或者水平滚动条），这里解决这个问题的思路是，在拖动层的onmouseup的事件函数中同时调用一个函数（以上提供了原型withDrag），这个函数会同时改变模式层的大小。

评论

1 楼 weick 2011-01-07  

"在Demo中，调用接口open的代码必须在</body>之后，否则会有document.body不是对象的bug"：
最近才知道这不是IE的问题，解决方法见：
http://dean.edwards.name/weblog/2005/09/busted/
http://dean.edwards.name/weblog/2006/06/again/
http://www.thefutureoftheweb.com/blog/adddomloadevent