主要是用div层的技术实现的, 具体看下面的代码
<html>
<head>
<script type="text/javascript" language="javascript">
//Author:lujianfei
//Date:2012-1-21
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400; //The width of msg;
msgh=100; //The height of title of the msg
titleheight=25; //the height of title of msg
bordercolor="#336699"; //The color of the border
titlecolor="#99CCFF"; // The color of title
var sWidth,sHeight;
sWidth=document.body.offsetWidth; //网页可见区域宽:document.body.offsetWidth (包括边线的宽)
sHeight=document.body.offsetHeight; //网页可见区域高:document.body.offsetHeight (包括边线的宽)
///*******************************************BgDiv******************************************///
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)";
/*
alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity,style).
opacity代表透明度数,选值0-100,0是完全透明,100是不透明.
finishopacity用来设置结束时的透明度,以达到渐变效果.取值范围也是0-100.style指渐变类型,0是无变化,1是线行渐变,2是放射渐变,3是X型渐变.
*/
bgObj.style.opacity="0.6"; //opacity是透明度
bgObj.style.left="0";
bgObj.style.width=sWidth+"px";
bgObj.style.height=sHeight+"px";
bgObj.style.zIndex="10000"; //z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
///*******************************************End BgDiv****************************************
///*******************************************Msg******************************************///
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"; //document.documentElement.scrollTop 获取当前页面的滚动条纵坐标
msgObj.style.width=msgw+"px";
msgObj.style.height=msgh+"px";
msgObj.style.textAlign="center";
msgObj.style.lineHeight="25px";
msgObj.style.zIndex="10001";
///*******************************************End Msg**************************************///
///*****************************MsgTitle:Caption***********************************//
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="Close";
title.οnclick=function(){
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
///**************************Txt********************************************//
var txt=document.createElement("p");
txt.style.margin="1 em 0";
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.body.appendChild(bgObj);
document.body.appendChild(msgObj);
msgObj.appendChild(title);
msgObj.appendChild(txt);
/*
body
|-bgDiv
|-msgDiv
|-msgTxt
|-msgtTitle
*/
}
</script>
</head>
<body>
<input type="button" value="Click here"
οnclick="sAlert('hello');" />
</body>