zoukankan      html  css  js  c++  java
  • html弹出div弹窗

    <!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%; 
                 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%; 
                 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>

      

  • 相关阅读:
    时间加减天数
    时间加减秒数
    什么BOM?
    js 事件基础
    js 九九乘法
    CSS3 动画基础单词语法
    css3 3D转换 基础语法
    css3 2D 转换 基础语法
    js onchange案例
    js之冒泡排序
  • 原文地址:https://www.cnblogs.com/xiaz/p/4978246.html
Copyright © 2011-2022 走看看