自定义layer弹出层为图片样式_css layer弹框放图样式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43428376/article/details/120290280

这篇博客展示了如何使用CSS设置透明背景和无阴影效果，并通过JavaScript的layer库创建一个自定义弹窗。弹窗内容包括一个居中显示的子元素，内容为‘测试’，并在设定的时间后自动关闭，关闭后重新加载页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置css样式：

body .tips { /* 加上body是为了保证优先级。 */
    background-color: transparent; /* 背景透明 */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* 前景无阴影 */
}

.parent {
    width: 318px;
    height: 140px;
    /* 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(./tips.png);
    background-size: 100% 100%;
}

.child {
    width: 205px;
    height: 95px;
    display: flex;
    justify-content: center;
    align-items: center;
}

自定义弹窗：

layer.open({
    time: 3 * 1000, // 指定时间之后自动关闭弹窗，单位秒
    type: 1,    // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    title: false,   // 不显示标题栏
    skin: "tips",   // 弹窗样式，这里为自定义样式
    area: ['318px', '139.5px'], //宽高
    resize: false,  // 禁止拖拽改变大小
    shadeClose: true,   // 点击遮罩层关闭弹出层
    // closeBtn: 0, // 右上角关闭按钮
    content: '<div class="parent">' +
        '<div class="child">' +
        '<span style="color: #FFFFFF;">测试</span>' +
        '</div>' +
        '</div>',
    end: function (index, layero) {  // 销毁弹出层之后执行的代码
        window.location.reload();
        return false;
    }
});

效果图：