用CSS实现的模式窗口效果,弹出固定大小的窗口

来源：互联网发布：编程在线教育编辑：程序博客网时间：2024/06/09 03:32

來源：http://www.php600.cn/read.php/586.htm

CSS代码：

<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>

HTML代码:

<p>click <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.865171.cn</h3>
</div> 
<div id="fade" class="black_overlay">
</div>