HTML 遮罩层 | 易学教程

<!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"> <meta http-equiv="content-type" content="text/html; charset=utf-8"></meta> <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>

来源：https://www.cnblogs.com/luckylp/archive/2012/04/23/2467314.html

标签

遮罩层