谈谈layer弹窗自定义样式,防止样式冲突问题(实习第七天)

当页面中存在多个layer弹窗并需自定义样式时,容易引发样式冲突。通过在自定义class前添加'skin'前缀,如'skin-addFri',可以有效避免这个问题。推荐使用此方法,简单且经过测试验证。

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

如果在一个页面中存在两个以上的layer弹窗,那么当我们修改其中一个弹窗的默认样式的话,其他的弹窗就会受到影响,今天就来谈谈怎么样去避免样式冲突。

layer自定义弹窗样式

问题情境:

  在一个全局页面中存在多个layer.open({});

layer.open({
                 type: 2,
                 title: '创建群',
                 area: ['520px', 'auto'],
                 fixed: false, //不固定
                 maxmin: true,
                 shade: 0,
                 skin: 'layui-layer-rim',
                 content: ['index1.html','no']
             });

我们知道在layer现在支持的两个你默认皮肤是:

  1. layui-layer-lan
  2. layui-layer-molv

  由于是默认的skin,所以在开发的时候难免需要自定义一些样式。但是如果一个页面中存在两个以上的弹窗时,由于引用的css样式都需要合并到同一个以css为后缀名的文件中,那么自定义样式的时候会发生样式之间的冲突。
  这边提供的方法是在你自定义样式的class名前面加一个skin的class名:

.layui-layer-rim .layui-layer-title{
            height: 28px!important;
            line-height: 28px!important;
            background: #5AC4FF!important;
            color: #fff!important;
            border: 0!important;
        }
        .layui-layer-rim .layui-layer-title>span{
            top: 0!important;
            left: 125px!important;
            cursor: pointer!important;
        }

在网上有一片文章的方法是这样的也可以尝试:

layer.open({
                 type: 2,
                 title: '添加好友',
                 area: ['520px', 'auto'],
                 fixed: false, //不固定
                 maxmin: true,
                 shade: 0,
                 skin: 'addFri',
                 content: ['index1.html','no']
             });

css文件夹中的样式

body .addFri .layui-layer-title{
            height: 28px!important;
            line-height: 28px!important;
            background: #5AC4FF!important;
            color: #fff!important;
            border: 0!important;
        }
        body .addFri .layui-layer-title>span{
            top: 0!important;
            left: 125px!important;
            cursor: pointer!important;
        }

skin是自定义出来的名字叫做:addFri。

这边推荐使用第一种方法,亲自测试有效,相对也比较简单!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值