如果在一個頁面中存在兩個以上的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。

這邊推薦使用第一種方法，親自測試有效，相對也比較簡單！