DIV实现完美模式窗口

来源：互联网发布：苹果7手机怎么备份数据编辑：程序博客网时间：2024/05/16 05:25

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.black_overlay{
   display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index:1001;
   moz-opacity: 0.3;
   opacity:.30;
   filter: alpha(opacity=30);
}
.white_content {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 50%;
   height: 50%;
   padding: 16px;
   border: 16px solid orange;
   background-color: white;
   z-index:1002;
   overflow: auto;
}
</style>
</head>
<body>
<p>单击 <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">模式窗口内容
<a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
<h3>www.66css.com</h3>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>