点击文字弹出一个DIV层窗口代码

    xiaoxiao2021-04-13  27

    <!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>
    转载请注明原文地址: https://ju.6miu.com/read-668968.html

    最新回复(0)