蒙层

css

.mask-box {
    width: px2rem(685px); 
    position: fixed;
    top: 0;
    right: px2rem(-685px);
    transition: all 0.5s;
    height: 100%;
    background:rgba(0,0,0,0.8); // 不影响子元素透明度
    z-index: 100;
    .close {
        margin-left: px2rem(60px);
        margin-top: px2rem(40px);
        img {
            width: px2rem(40px);
            height: px2rem(40px);
        }
    }
    .title {
        font-size: px2rem(40px);
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        margin-top: px2rem(-10px);
    }
    .content {
        margin-left: px2rem(40px);
        margin-right: px2rem(40px);
        margin-top: px2rem(60px);
        height: 80%;
        overflow: auto; // 必须结合高度
        font-size: px2rem(28px);
        line-height: px2rem(48px);
        color: #fff;

        p {
            text-indent: 2em;
        }

        .image {
            margin-top: px2rem(20px);
            margin-bottom: px2rem(20px);

            img {
                opacity: 1;
                width: 100%;
            }
        }
    }
}

js

// 查看
$(".view-btn").on('click', function () {
    var id = $(this).data('id');
    $.ajax({
        type: 'POST',
        url: '/wx.php/Index/ajaxGetOptionContent',
        data: {
            option_id: id,
        },
        dataType: 'json',
        timeout: 3000,
        async: true, //所有请求均为异步。如果需要发送同步请求
        cache: false, //浏览器是否应该被允许缓存GET响应。
        context: $('body'),
        success: function (res) {
            if (res.errno == 0) {
                // body 滑动关闭
                $('body').removeClass('overflow-auto');
                $('body').addClass('overflow-hidden');
                $('#mask-content').html(res.data.content);
                $('.mask-box').css({"right":"0"});
            } else {
                layer_msg(res.errdesc);
            }
        },
        error: function () {
            layer_msg('请求失败，请重试');
        }
    })
    return false; // 不触发父div点击事件
});

// 点击页面关闭蒙层
$("body").on('click', function () {
    // body 滑动开启
    $('body').addClass('overflow-auto');
    $('#mask-content').html('');
    $('.mask-box').css({"right":"-9.13333rem"});
    return false; // 不触发父div点击事件
});

// 点击关闭按钮关闭蒙层
$(".close").on('click', function () {
    // body 滑动开启
    $('body').addClass('overflow-auto');
    $('#mask-content').html('');
    $('.mask-box').css({"right":"-9.13333rem"});
    return false; // 不触发父div点击事件
});