div+css弹出窗口

 

<html>
<head>
<title>LIGHTBOX EXAMPLE</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.8;  opacity:.80;  filter: alpha(opacity=80);  }   
  .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>可以根据自己要求修改css样式<href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p>
<div id="light" class="white_content">
 This is the lightbox content.
 
<href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
 Close
</a></div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
<href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>

你可能感兴趣的:(div+css弹出窗口)