为什么要loading效果呢？一方面为了ui友好显示，另一个重要的原因就是防止用户再次点击button之类容易产生postback效果的控件。
/*
*弹出层的方法
* wTitle ---层的标题
* content ---层内的内容
* pos ---坐标对象
* wWidth ---层的宽度
*/
function showMessageBox(wTitle,content,pos,wWidth,wheight) {
closeWindow();
//获取游览器的可视区域宽与高
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
//当为其他浏览器的时候
if(!isIe){
bWidth=document.body.offsetWidth; //获取窗体的宽度
bHeight=screen.height; //获取窗体的高度
}
//alert(bWidth+"___"+bHeight);
//设置可见度
if(isIe){
setSelectState('hidden');
}
//创建弹出层的背景div
var back=document.createElement("div");
//设置背景div的id
back.id="back";
//样式字符串
var styleStr="top:0px;left:0px;position:absolute;background:#ffffff;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
//给背景div设置样式
back.style.cssText=styleStr;
//将背景div加入到body中
document.body.appendChild(back);
//调用让背景渐渐变暗的方法
//showBackground(back,50);
//创建消息层
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+((bWidth-wWidth)/2)+"px;top:"+((bHeight-150)/2)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
//添加到body中
document.body.appendChild(mesW);
}
//关闭窗口
function closeWindow() {
if(document.getElementById('back')!=null) {
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null){
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');
}
}
//判断浏览器，如果是ie isIe=true;
var isIe=(document.all)?true:false;
/*
*设置名字为select的对象的所有样式是否可用
* state ---是否可以见
**/
function setSelectState(state) {
var objl=document.getElementsByTagName('input');
for(var i=0;i<objl.length;i++) {
objl[i].style.visibility=state;
}
}
index.html
<head>
<script src="js/message.js" language="javascript" type="text/javascript"></script>
<script>
//测试弹出
function testMessageBox(ev){
//获取时间对象的坐标
var objPos = mousePosition(ev);
messContent="<img src='images/ajax-loader.gif'/> 正在加载请稍等...";
showMessageBox('提示信息',messContent,objPos,200,50);
}
</script>
<link href="css/message.css" type="text/css" rel="stylesheet"/>
</head>
<body onLoad="testMessageBox(event);">
测试页面<input name="" type="button"><input name="" type="button">
</body>