模拟一个弹出消息框,有模式。核心接口是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> </td></tr></TABLE></td></tr><tr><td align=center style='padding-bottom:10px'><button>确定</button> <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.οnclick=close; //关闭层 _domBtn.οnclick=click; //确定按钮事件 _domCancel.οnclick=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),这个函数会同时改变模式层的大小。