改善用户体验之alert提示效果

轉自:http://bbs.blueidea.com/thread-2688074-1-1.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="zh-CN"  lang ="zh-CN" >
     < head >
         < meta  name ="verify-v1"  content ="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8="   />
         < title >
            政策文件_中国电力工程造价信息网 </ title >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
         < meta  http-equiv ="Content-Language"  content ="gb2312"   />
         < meta  name ="KeyWords"  content ="电力工程造价,价格信息,装材,设备,电力工程"   />
         < meta  name ="description"  content ="电力工程造价信息"   />
         < style  type ="text/css" >
            * {
                margin : 0 ; padding : 0 ;
             }
         </ style >
     </ head >
     < body >
    
     < div  class ="cecmbody"  id ="cecmpolicy" >
         < div  class ="leftClass" >
            
< p > 测试 </ p >< p > 测试 </ p >
             < p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >
             < p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >
             < input  type ="button"  value ="点击这里"  onclick ="sAlert('测试效果');"   />
        
         </ div >
         < div  class ="rightClass" >
         </ div >     
     </ div >
                 < script  type ="text/javascript"  language ="javascript" >
// Author:Daviv
// Blog:http://blog.163.com/jxdawei
// Date:2006-10-27
// Email:[e-mail]
             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 = 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  = " 25px " ;
            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);
            }
         </ script >
     </ body >
</ html >