继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

layui.layer 弹出层背景透明,前景无阴影实现方案

杨魅力
关注TA
已关注
手记 326
粉丝 56
获赞 259

先上具体实现方法。
首先,在 css 里给 layer 弹出层写个自定义 skin (这点不明白的同学请出门左转 layui 官网文档):

.myskin{        background-color: transparent;/*背景透明*/
        box-shadow: 0 0 0 rgba(0,0,0,0);/*前景无阴影*/
    }

然后,
在准备弹出 layer 的时候:

layerIndex = layer.open({/*用于手动关闭弹出层*/
            type: 1,            title: false,            closeBtn: 0,            shadeClose: true,            area:  ['auto', '520'],            skin: 'myskin',/*注意这里用到了我们前面给 layer 写的自定义 skin*/
            content: html,/*自定义 html 内容,注意这里的整个 html 内容背景肯定是透明的*/
            success: function(layero, index){
            },            end: function(){
            }
        });

这就 OK 了。
再说说上面实现方案的适用场景,一图以蔽之:


webp

需求.png




作者:xiaofei_dev
链接:https://www.jianshu.com/p/c7386bc17489


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP