网页消息提示框

 

最近一直在做一个网站项目，应为其项目完全采用了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];elsee.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做的消息框，然后又自动淡出。