神秘的 J2ee 殿堂

·古之学者必有师·做学者亦要做师者·FIGHTING·

div 弹出框



<html>
<head>
<style>
body
{
font-size
:12px;
}
</style>
<script type="text/javascript" language="javascript">
function divShow(tip){
//基础定义
var bgWidth,bgHeight;
var msgWidth=300;
var msgHeight=100;
var titleHeight=20;
bgWidth
=document.body.offsetWidth;
bgHeight
=document.body.offsetHeight;
var titleBgColor="#99CCFF";

var bgDiv=document.createElement("div");
bgDiv.setAttribute(
"id","bgDiv");
bgDiv.style.position
="absolute";
bgDiv.style.top
="0";
bgDiv.style.left
="0";
bgDiv.style.background
="#777";
bgDiv.style.filter
="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgDiv.style.opacity
="0.6";
bgDiv.style.width
=bgWidth+"px";
bgDiv.style.height
=bgHeight+"px";
bgDiv.style.zIndex
="100";
document.body.appendChild(bgDiv);

var msgDiv=document.createElement("div");
msgDiv.setAttribute(
"id","msgDiv");
msgDiv.setAttribute(
"align","center");
msgDiv.style.background
="white";
msgDiv.style.position
="absolute";
msgDiv.style.left
="35%";
msgDiv.style.top
="40%";
msgDiv.style.width
=msgWidth+"px";
msgDiv.style.height
=msgHeight+"px";
msgDiv.style.textAlign
="center";
msgDiv.style.zIndex
="101";

var title=document.createElement("div");
title.setAttribute(
"id","title");
title.setAttribute(
"align","right");
title.style.background
=titleBgColor;
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.height
=titleHeight;
title.innerHTML
="<span id='closeButton' style='cursor:pointer'>关闭</span>";

document.body.appendChild(msgDiv);
document.getElementById(
"msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin
="1em 0"
txt.setAttribute(
"id","msgTxt");
txt.innerHTML
=tip;
document.getElementById(
"msgDiv").appendChild(txt);
var closeAll= document.getElementById("closeButton");
closeAll.onclick
=function(){
document.body.removeChild(bgDiv);
document.getElementById(
"msgDiv").removeChild(title);
document.body.removeChild(msgDiv);
  }

}
</script>
</head>
<body>
<div id="bgContent">
<input type="button" value="弹出" onclick="divShow('显示我吧');"/>
</div>
</body>
</html>

posted on 2008-09-17 17:15 月芽儿 阅读(1581) 评论(1)  编辑  收藏 所属分类: J2EE学习心得

评论

# re: div 弹出框 2009-09-11 11:11 b

b  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿(2)

随笔分类

随笔档案

相册

搜索

最新评论

阅读排行榜

评论排行榜