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

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

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

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

由于是默认的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;
        }