談談layer彈窗自定義樣式，防止樣式沖突問題

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

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

 

原文引用  ALLEN的博客