css弹出遮罩层

最新推荐文章于 2024-08-25 20:15:05 发布

于瓜瓜

最新推荐文章于 2024-08-25 20:15:05 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/nich002/article/details/47127863

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

说明：需要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();
    }