大家细心就会发现，为了改善用户体验，各大门户网站都在极力避免上图的提示方式。如新浪邮箱采用的这种提示方式我比较喜欢，无聊就来研究了一下。

实现原理：

在body也就是网页的内容之上增加二个Div标签，一个用于设置背景变暗的效果，把下边的内容挡住．另一个当然就是大家看到的提示窗口．

实现方法：

先说用来挡住网页内容的层．

设置它的宽度满屏，高度满屏．背景设Gray（暗灰色）．

重点在于设置他的透明度．这一点上Internet Explorer 与 Firefox　有所不同．所以在设置时要考虑浏览器的兼容性．IE里直接设置滤镜Filter:Alpha的值即可，而Firefox中则要设置opacity．这样背景层就实现了．

再说上边的提示窗口．

这个窗口的重点是让他浮于上边的背景层之上．用z-index属性即可设置．

要让窗口的位置居中，用document.body.offsetHeight & document.body.offsetWidth　以及窗口本身的宽度高度等值来计算位置即可．

由于这里不方便帖代码，有兴趣的朋友可以看我在蓝色经典发的帖子．做了一个纯ＪＳ文件实现的这样一个功能．

帖子地址：改善用户体验之alert提示效果

下载js脚本文件后，在需要提示的页面只需要先转入该脚本文件,以下是脚本文件代码

alert.js

   /*
   作者：Daviv
   博客：http://blog.163.com/jxdawei
   时间：2006-10-27
   感谢：wenming (Blueidea)
   
   功能：弹出提示
   方法：调用sAlert("您要弹出的信息");   
   
   */
   
   function sAlert(str){
   var msgw,msgh,bordercolor;
   msgw=400;//提示窗口的宽度
   msgh=100;//提示窗口的高度
   titleheight=25 //提示窗口标题高度
   bordercolor="#336699";//提示窗口的边框颜色
   titlecolor="#99CCFF";//提示窗口的标题颜色
   
   var sWidth,sHeight;
   sWidth=document.body.offsetWidth;
   sHeight=document.body.offsetHeight;
   if (sHeight<screen.height)
   {
    sHeight=screen.height;
   }

   var bgObj=document.createElement("div");
   bgObj.setAttribute('id','bgDiv');
   bgObj.style.position="absolute";
   bgObj.style.top="0";
   bgObj.style.background="#777";
   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
   bgObj.style.opacity="0.6";
   bgObj.style.left="0";
   bgObj.style.width=sWidth + "px";
   bgObj.style.height=sHeight + "px";
   bgObj.style.zIndex = "10000";
   document.body.appendChild(bgObj);
   
   var msgObj=document.createElement("div")
   msgObj.setAttribute("id","msgDiv");
   msgObj.setAttribute("align","center");
   msgObj.style.background="white";
   msgObj.style.border="1px solid " + bordercolor;
      msgObj.style.position = "absolute";
            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height =msgh + "px";
            msgObj.style.textAlign = "center";
            msgObj.style.lineHeight = (msgh-titleheight) + "px";
            msgObj.style.zIndex = "10001";
  
     var title=document.createElement("h4");
     title.setAttribute("id","msgTitle");
     title.setAttribute("align","right");
     title.style.margin="0";
     title.style.padding="3px";
     title.style.background=bordercolor;
     title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
     title.style.opacity="0.75";
     title.style.border="1px solid " + bordercolor;
     title.style.height="18px";
     title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
     title.style.color="white";
     title.style.cursor="pointer";
     title.innerHTML="关闭";
     title.onclick=function(){
          document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
     document.body.appendChild(msgObj);
     document.getElementById("msgDiv").appendChild(title);
     var txt=document.createElement("p");
     txt.style.margin="1em 0"
     txt.setAttribute("id","msgTxt");
     txt.innerHTML=str;
           document.getElementById("msgDiv").appendChild(txt);
            }

然后在其它需要提示的地方直接写

sAlert("需要提示的信息");