简单弹出层实例

最新推荐文章于 2021-08-04 08:27:37 发布

brock

最新推荐文章于 2021-08-04 08:27:37 发布

阅读量503

点赞数

分类专栏： css样式控制文章标签： button javascript div function xhtml input

本文链接：https://blog.csdn.net/zhdd1234/article/details/4150523

版权

css样式控制专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!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 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>

brock

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单弹出层实例

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 弹出层 body{ margin:0px; padding:0px;} #cover{ position:absolute;top:0px;left:0px;width:100%;height:100%;backg
复制链接

扫一扫