html弹出框



    <style>
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.7;
            opacity: 0.7;
            filter: alpha(opacity=70);
        }

        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 8px;
            border: 8px solid orange;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
    </style>

    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';">触发事件</a>

    <!--弹出div-->
    <div id="light" class="white_content">
        <p align="right">
            <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
        </p>
        <table align="center">
            <tr>
                <td>新浪微博分享：</td>
                <td><wb:share-button addition="simple" type="button" default_text="分享内容。。。"></wb:share-button></td>
            </tr>
        </table>
    </div>
    <!--全屏变黑-->
    <div id="fade" class="black_overlay">
    </div>