如果在一个页面中存在两个以上的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现在支持的两个你默认皮肤是:
- layui-layer-lan
- 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。