网页消息提示框

 

最近一直在做一个网站项目，应为其项目完全采用了AJAX技术实现内容加载，提交等操作。所以网络网通可能导致无法加载内容，但又不能让页面空着，所以需要做一个提示，用alert()来做提示的话，每次都要点击确定，很麻烦，所以想到了EXT的扩展里面的ToastMsg，和QQ空间的提示，很友好，EXT扩展里面的ToastMsg是现成的，调用也很简单，但是必需依赖EXT-ALL。所以决定自己做一个经过几半个多小时的研究，完成了自己的提示框。拿出来和大家分享一下。

代码如下：

js文件：

var intTimeStep = 100; var isIe = (window.ActiveXObject) ? true : false; var intAlphaStep = (isIe) ? 5 : 0.05; var curSObj = null; var curOpacity = null; var stopTime = 0; var createEl = function(t, a, y, x)// 通用HTML元素生产方法。t：要生成的HTML标签比如生成DIV ，t=div,；a：属性，比如元素的id,name,class等，y：元素的样式style；x：在元素内插入的内容。 { var e = document.createElement(t); document.body.appendChild(e); if (a) { for (var k in a) { if (k == 'class') e.className = a[k]; else if (k == 'id') e.id = a[k]; else e.setAttribute(k, a[k]); } } if (y) { for (var k in y) e.style[k] = y[k]; } if (x) { e.appendChild(document.createTextNode(x)); } return e; } function startObjMessage(objId, msg)//调用该方法，objid是html元素的ID，msg是提示框显示的内容 { curSObj = document.getElementById(objId); if (curSObj == null) { curSObj = createEl('div',{ id : objId, name : objId },"",msg); } curSObj = document.getElementById(objId); var h = document.body.scrollTop+(window.screen.availHeight/2+60); var w = document.body.scrollLeft + (window.screen.availWidth-770); curSObj.style.left = h+'px'; curSObj.style.top = w+'px'; setMessage(); } function setMessage() { if (isIe) { curSObj.filters.alpha.opacity = 0; } else { curOpacity = 0; curSObj.style.opacity = 0 } curSObj.style.display = ''; setMessageShow(); } function setMessageShow(){ if (isIe) { curSObj.filters.alpha.opacity += intAlphaStep; if (curSObj.filters.alpha.opacity < 100) { setTimeout('setMessageShow()', intTimeStep); } else { stopTime += 10; if (stopTime < 500) { setTimeout('setMessageShow()', intTimeStep); } else { stopTime = 0; setMessageClose(); } } } else { curOpacity += intAlphaStep; curSObj.style.opacity = curOpacity; if (curOpacity < 1) { setTimeout('setMessageShow()', intTimeStep); } else { stopTime += 10; if (stopTime < 200) { setTimeout('setMessageShow()', intTimeStep); } else { stopTime = 0; setMessageClose(); } } } } function setMessageClose() { if (isIe) { curSObj.filters.alpha.opacity -= intAlphaStep; if (curSObj.filters.alpha.opacity > 0) { setTimeout('setMessageClose()', intTimeStep); } else { curSObj.style.display = 'none'; } } else { curOpacity -= intAlphaStep; if (curOpacity > 0) { curSObj.style.opacity = curOpacity; setTimeout('setMessageClose()', intTimeStep); } else { curSObj.style.display = 'none'; } } }

CSS文件：

#errerMsg { filter: alpha(opacity = 0); /*IE*/ opacity: 0; /*Mozilla*/ display: 'none'; position:absolute; z-index:999; text-align: center; width: 180px; height: 15px; margin: auto; padding: 10px; border: 3px double #F6A648; font-size : 14px; color : #FFFFDB; left: 0px; top: 0px; background-color: #FF7C2E; }

 

调用是只需要调用 startObjMessage(“errerMsg”, “加载失败！”);//“errerMsg”提示框ID， “加载失败！”：提示内容

提示框样式有CSS决定，但是CSS样式里必须包含一下5个属性：

 

filter: alpha(opacity = 0); /*透明度支持IE*/ opacity: 0; /*透明度支持火狐，这两个属性少一个都都会在一种浏览器中失效*/ display: 'none'; left: 0px; top: 0px;

 

属性，这里的提示框是一个浮动层，所以CSS里也必须加上一下两个属性：

position:absolute; z-index:999;

 

有些简陋，提供出源码给各位同仁参考和改进，请莫笑小弟！

效果图就不传了，很简单就是在网页的中间点的位置淡出一个DIV做的消息框，然后又自动淡出。