遮罩层DIV+CSS

来源：互联网发布：云计算hcie待遇编辑：程序博客网时间：2024/05/17 12:52
最近在研究前端的东西
<!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 charset="utf-8"><title>遮罩层</title><script language="javascript" type="text/javascript">function showdiv() { document.getElementById("bg").style.display ="block";document.getElementById("show").style.display ="block";}function hidediv() {document.getElementById("bg").style.display ='none';document.getElementById("show").style.display ='none';}</script><style type="text/css">    #bg{         display: none;         position: absolute;         top: 0%;         left: 0%;         width: 100%;         height: 100%;         background-color: black;         z-index:1001;         -moz-opacity:0.7;         opacity:.70;         filter:         alpha(opacity=70);    }    #show{        display: none;         position: absolute;         top: 20%;         left: 12%;         width: 70%;         height: 60%;         padding: 8px;         border: 8px solid #E8E9F7;         background-color: white;         z-index:1002;         overflow: auto;    }</style></head><body><input id="btnshow" type="button" value="Show" onclick="showdiv();"/><div id="bg"></div><div id="show"><input id="btnclose" type="button" style="float:right" value="Close" onclick="hidediv();"/><span style="float:right">关闭</span></div></body></html>
0 0