DIV弹出层代码

最新推荐文章于 2024-09-30 15:23:15 发布

sunlianghao

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量289

点赞数

文章标签： div button javascript function input opera

本文链接：https://blog.csdn.net/sunlianghao/article/details/5916772

版权

<head>
<meta name="Author" content="lsh710,online.hfut.edu.cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层</title>
<style type="text/css">
body{ margin:0px; padding:0px;}
#cover{ position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#000;
filter:alpha(opacity=55);/*对应IE*/
-moz-opacity: 0.55;/*对应FF*/
opacity: 0.55;/*对应Opera*/
display:none;
}
#tb_window{
width:300px; height:100px; border:2px #C60 solid; position:absolute; top:200px;left:400px;z-index:3; background:#FFF;}

#button{ margin:auto; width:300px; margin-top:200px;}
</style>

</head>
<body>
<br />
<br /><br />
<span></span>
<br /><br />
<div id="cover">
<div id="tb_window">
<a href="javascript:hidden()" >关闭</a>
<div id="messages">的内容！！！</div>
</div>
</div>

<div id="button">
<input type="button" οnclick="show('显示1显示1显示1显示1显示1')" value="显示1" />

<input type="button" οnclick="show('显示222222222222222222')" value="显示2" />
</div>
<script type="text/javascript" language="javascript">
function show(messges)
{
document.getElementById("messages").innerHTML="<div id='messages'>"+messges+"！！</div>";
document.getElementById("button").style.display = "none";
document.getElementById("cover").style.display = "block";

}
function hidden()
{
document.getElementById("cover").style.display = "none";
document.getElementById("button").style.display = "block";
}
</script>
</body>
</html>