css弹出遮罩层

来源：互联网发布：java爬虫书籍推荐编辑：程序博客网时间：2024/06/08 16:50

说明：需要jquery支持，支持IE8+，googlechrome，firefox，话不多说，上代码。
html:

    <input type="button" onclick="showMaskShadow()" value="弹出遮罩层" />    <!-- 弹出查看图片窗口 begin -->    <div class="bgDiv"></div>    <div class="contentDiv">        <input type="button" onclick="hideMaskShadow()" value="点我隐藏" />        <h2>您可以在这里自定义内容</h2>    </div>    <!-- 弹出查看图片窗口  end-->

css:.

    /**     * 弹出div窗口样式     **/    .bgDiv {        display: none;        position: absolute;        top: 0%;        left: 0%;        width: 100%;        height: 100%;        background-color: black;        z-index: 1001;        -moz-opacity: 0.7;        opacity: .70;        filter: alpha(opacity = 70);    }    .contentDiv {        display: none;        position: absolute;        top: 1%;        left: 1%;        width: 95%;        height: 93%;        padding: 8px;        border: 8px solid #E8E9F7;        background-color: white;        z-index: 1002;        overflow: auto;        text-align: center;    }

js:

    // 弹出遮罩层    function showMaskShadow(){        $('.bgDiv').show();        $('.contentDiv').show();    }    // 隐藏遮罩层    function hideMaskShadow() {        $('.bgDiv').hide();        $('.contentDiv').hide();    }

0 0