- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>点击文字弹出一个DIV层窗口代码</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=88);
- }
- .white_content {
- display: none;
- position: absolute;
- top: 25%;
- left: 25%;
- width: 55%;
- height: 55%;
- padding: 20px;
- border: 10px 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'">请点这里</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'">点这里关闭本窗口</a></div>
- <div id="fade" class="black_overlay"></div>
- </body>
- </html>
转自：Elina_1992的专栏 https://blog.csdn.net/elina_1992/article/details/49492761