源于生活

标题: 点击文字弹出一个DIV层窗口代码 [打印本页]
作者: kevin-ying    时间: 2015-1-4 19:05
标题: 点击文字弹出一个DIV层窗口代码

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4.     <head>
  5.         <title>点击文字弹出一个DIV层窗口代码</title>
  6.         <style>
  7.         .black_overlay{
  8.             display: none;
  9.             position: absolute;
  10.             top: 0%;
  11.             left: 0%;
  12.             width: 100%;
  13.             height: 100%;
  14.             background-color: black;
  15.             z-index:1001;
  16.             -moz-opacity: 0.8;
  17.             opacity:.80;
  18.             filter: alpha(opacity=88);
  19.         }
  20.         .white_content {
  21.             display: none;
  22.             position: absolute;
  23.             top: 25%;
  24.             left: 25%;
  25.             width: 55%;
  26.             height: 55%;
  27.             padding: 20px;
  28.             border: 10px solid orange;
  29.             background-color: white;
  30.             z-index:1002;
  31.             overflow: auto;
  32.         }
  33.     </style>
  34.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  35.     </head>
  36.     <body>
  37.         <p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p>
  38.         <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>
  39.         <div id="fade" class="black_overlay"></div>
  40.     </body>
  41. </html>
复制代码






欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1