S.l.e!ep.¢%

像打了激速一样,以四倍的速度运转,开心的工作
简单、开放、平等的公司文化;尊重个性、自由与个人价值;
posts - 1098, comments - 335, trackbacks - 0, articles - 1
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

div 层 + 背景变半透明 + 自动消失

Posted on 2009-09-10 22:33 S.l.e!ep.¢% 阅读(456) 评论(0)  编辑 收藏 引用 所属分类: 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">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>无标题文档</title>
<script language="javascript">
function alertWin(title, msg, w, h)
{
 var bordercolor = "#FFFFFF"; // 提示窗口的边框颜色
 var bgcolor     = "#000000"; // 提示内容的背景色
 
 var nWidth  = document.documentElement.clientWidth; 
 var nHeight = document.documentElement.clientHeight;

 var objDiv = document.createElement("div");
 objDiv.style.cssText = "position:absolute;left:0px;top:0px;width:" +
                               nWidth +
                               "px;height:" +
                               Math.max(document.body.clientHeight, nHeight) +
                               "px;filter:Alpha(Opacity=50);opacity:0.3;background-color:#000000;z-index:101;";

 document.body.appendChild(objDiv);
 
 var objMsg = document.createElement("div");
 objMsg.style.cssText = "position:absolute;font:11px '宋体';top:" + (nHeight-h) / 2 + "px;" +
                               "left:" + (nWidth - w) / 2 +
                               "px;width:"+w+"px;height:" + h +
                               "px;px;filter:Alpha(Opacity=60);text-align:center;border:1px solid " + bordercolor + ";background-color:" + bgcolor + ";padding:1px;line-height:22px;z-index:102;";
 document.body.appendChild(objMsg);
       
        objMsg.innerHTML = "<font color=#FFFFFF><h2 align=absmiddle vertical-align=center><pre>" + msg + "</pre></h2></font>";

        setTimeout( function(){ document.body.removeChild(objDiv); document.body.removeChild(objMsg); }, 2000);
}
</script>
</head>
<body>
<input type="button" value="点这里" onclick="alertWin('标题','这里是内容',300,200);" />
</body>
</html>


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理