Js仿弹框

浏览数：14 / 时间：2015年06月09日

收藏一个简单实用的JS弹框，通过隐藏和显示div来实现，代码来自脚本之家！

<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>
        <p>
            可以根据自己要求修改css样式
            <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">
            This is the lightbox content.
            <a href="javascript:void(0)" onclick="document.getElementById(‘light‘).style.display=‘none‘;document.getElementById(‘fade‘).style.display=‘none‘">
                Close
            </a>
        </div>
        <div id="fade" class="black_overlay">
        </div>
    </body>
</html>