纯用DIV弹出DIV窗口(经测试试用IE、firefox等浏览器)

来源:互联网 发布:java threadGroup 编辑:程序博客网 时间:2024/05/18 00:57

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

<a href="javascript:void(0)" onclick="document.getElementById

 

('light').style.display='block';document.getElementById('fade').style.display='block'">打开</a> 

<div id="light" class="white_content"> 

    内容

    <a href="javascript:void(0)" onclick="document.getElementById

 

('light').style.display='none';document.getElementById('fade').style.display='none'"> 

    关闭</a></div> 

<div id="fade" class="black_overlay"> 

</div> 

</body> 

</html>

原创粉丝点击