您的位置：首页 > Web前端 > CSS

HTML CSS 遮罩效果！

2009-06-16 14:55 239 查看

注：偷学别人的，由于暂时没时间修改，故先存着

<!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 runat="server">
<title>无标题页</title>
<style type="text/css">
#cover
{
position:absolute;

right:0px;
bottom:0px;
width:100%;
height:100%;
background-color:#D6E6FF;
filter:alpha(opacity=55);
-moz-opacity: 0.55;
opacity: 0.55;
display:none;
z-index:5;
}
#tb_window
{
width:450px;
height:220px;
border:2px #6699CC solid;
z-index:2;
background:#FFFFFF;
margin:200px auto;
}
#Button1
{
margin:300px 47%;
}
</style>

<script type="text/javascript">
function show(message)
{
document.getElementById("messageId").innerHTML=message;
document.getElementById("Button1").style.display="none";
document.getElementById("cover").style.display="block";
}
function hidden()
{
document.getElementById("cover").style.display="none";
document.getElementById("Button1").style.display="block";
}
</script>

</head>
<body style="margin:0 0 0 0; padding:0 0 0 0;">
<form id="form1" runat="server">

<div id="cover" style="left: 0px; top: 0px;">
<div id="tb_window" style="margin-left:30%;">

<div style="background:#6699CC; text-align:right; height:28px; padding:5px;">
<label id="title" style="float:left; font-size:15px; color:blue;">value</label>
<img onclick="javascript:hidden();" src="image/close.gif" style=" border-style:none;" />
</div>

<div style="padding-left:6px;">
<p>省/直辖市</p>
<div id="messageId">
广东北京
</div>
</div>
</div>
</div>

<div>
<h1 style="text-align: center">
测试透明</h1>

<input id="Button1" type="button" value="弹出遮罩层" onclick="show('广东江苏');" />
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航