自定义layer弹出层为图片样式

# 前端 / 86访问 / 0评论 / 2021-09-23

置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;
    }
});

 

效果图:

本文地址: https://www.kumaomao.cn/article/OGLTBMFZAI.html

原文地址: https://blog.csdn.net/qq_43428376/article/details/120290280