javascript 信息提示框


效果参考网站:http://www.miiceic.org.cn/eg/eg7/tsk.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>安博中程企业培训,企业内训,专注于android培训,软考培训,软件开发,软件工程,嵌入式,UI设计,重构,架构等IT企业培训</title>
<meta name="keywords" content="企业培训,企业内训,android培训,软考培训,it企业培训"/>
<meta name="description" content="安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库, 国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训, 敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品 牌."/>
<meta name="copyright" content="安博教育集团 中程在线北京科技有限公司版权所有"/>
<meta name="subject" content="软件开发企业培训,企业内训,软考培训,android应用开发培训,软件工程培训,嵌入式培训,UI设计培训"/>
<meta name="author" content="安博教育集团安博中程"/>
<style type="text/css">
*{margin:0;padding:0} 
body{ background:#fff;font-size:12px; font-family:Tahoma;}
h2{font-size:14px;color:#023b92;margin:10px 0 5px 10px;}
h2 a:link,h2 a:visited{color:#023b92;text-decoration:none;}
h2 a:hover{color:#023b92;text-decoration:underline;}
#ds2 a{color:#000;text-decoration:underline;}
.notice_top{width:258px;height:10px;background:url(show/notice_top.png) bottom left no-repeat;marign:0;padding:0;}
.notice_body{width:258px;height:60px;background:url(show/notice_body.gif) repeat-y;marign:0;}
.notice_foot{width:258px;height:9px;background:url(show/notice_foot.gif) no-repeat;marign:0;}
.lnbody{width:40px;height:42px;padding:10px;float:left;}
.mnbody{width:172px;height:62px;float:left;font-size:12px;line-height:20px;}
.mnbody a{font-size:12px;text-decoration:underline;color:#000;}
.rnbody{width:16px;height:57px;padding-top:5px;padding-right:5px;padding-left:5px;float:left;}
</style>
</head>
<body>

</body>
</html>
<script type="text/javascript">
function AlertNotice(){
   var msgw,msgh,bordercolor;
   msgw=258;//提示窗口的宽度
   msgh=79;//提示窗口的高度
  
   var msgObj=document.createElement("div")
      msgObj.setAttribute("id","msgDiv");
      msgObj.style.position = "absolute";
      msgObj.style.left = "200px";
      msgObj.style.top = "160px";

      msgObj.style.width = msgw + "px";
      msgObj.style.height =msgh + "px";
      msgObj.style.zIndex = "10001";
  
     var ntitle=document.createElement("div");
     ntitle.setAttribute("id","msgTitle");
     ntitle.className="notice_top";

                           
     nbody = document.createElement("div");
     nbody.setAttribute("id","msgBody");
     nbody.className="notice_body";
     
     nfoot = document.createElement("div");
     nfoot.setAttribute("id","msgFoot");
     nfoot.className="notice_foot";
     
     lnbody = document.createElement("div");
     lnbody.setAttribute("id","lnbody");
     lnbody.className="lnbody";
     lnbody.innerHTML="<img src='show/notice.gif' width=40 height=41>";
     
     mnbody = document.createElement("div");
     mnbody.setAttribute("id","mnbody");
     mnbody.className="mnbody";
     mnbody.innerHTML="<strong>企业培训</strong>:<a href='http://www.miiceic.org.cn/'>安博教育中程在线</a><br />企业培训,企业内训,android培训,软考培训,it企业培训";   
     
     rnbody = document.createElement("div");
     rnbody.setAttribute("id","rnbody");
     rnbody.className="rnbody";
     rnbody.innerHTML="<img src='show/notice_close.gif' width=16 height=16>";   
     rnbody.onclick=function(){
                        document.getElementById("msgDiv").removeChild(ntitle);
                        document.getElementById("msgDiv").removeChild(nbody);
                        document.getElementById("msgDiv").removeChild(nfoot);
                        document.body.removeChild(msgObj);
                      }
     
     document.body.appendChild(msgObj);
     
     document.getElementById("msgDiv").appendChild(ntitle);
     document.getElementById("msgDiv").appendChild(nbody);
     document.getElementById("msgDiv").appendChild(nfoot);
     
     document.getElementById("msgBody").appendChild(lnbody);
     document.getElementById("msgBody").appendChild(mnbody);
     document.getElementById("msgBody").appendChild(rnbody);
}
AlertNotice();
</script>

 

效果参考网站:http://www.miiceic.org.cn/eg/eg7/tsk.html

posted @ 2011-12-20 08:57  通海口  阅读(359)  评论(0编辑  收藏  举报