layer算現在比較火的前端框架了。由於本人審美太差，所以做前臺基本都是湊（can）合（bu）湊（ren）合（du），於是就有了這篇博。昨天在改一個頁面的彈窗樣式的時候搞得我不要不要的，頁面上有一個用來提示的layer彈窗，彈窗要給使用者提示一個訊息，還要提供給使用者兩個用來選擇點選的按鈕，layer彈窗裡面如果加了按鈕的話，預設第一個按鈕和後面的按鈕樣式會不一樣。

像這樣：

，第一個按鈕永遠是藍色的，怎麼改style都沒用。

後面去看了一下layer的官方API，找到了一個投機取巧的方法，成功搞定。先給上面這個彈出框的程式碼：

layer.open({
        content:'這裡是提示資訊'
 

       ,btn: ['btn1', 'btn2'] //可以無限個按鈕
       ,title:'提示框'
       ,btn1:function(index, layero){
                   layer.close(index);
             }//第一個按鈕的點選事件
       ,btn2:function(index, layero){
                layer.close(index);
             }//第二個按鈕的點選事件
       //這裡還可以新增其他彈窗屬性，具體可以去看一下layer的官方API
 

});

後面找到的解決方法的程式碼：

layer.open({
        content:'這裡是提示資訊'
       ,btn: ['btn1', 'btn2'] //可以無限個按鈕
       ,title:'提示框'
       ，success:function (layer){
       //這個函式就是在彈窗彈出成功後執行的函式
       //這個layer包含了彈窗裡面的所有的html內容
       //有了這個就非常好辦了，我用js除錯了一下馬上就定位到了彈窗框的位置然後改了他的class屬性，成功。
       //這是我定位的第一個按鈕的程式碼
layer[0
 
].childNodes[3].childNodes[0].attributes[0].value='layui-layer-btn1';
                }
       ,btn1:function(index, layero){
                   layer.close(index);
             }//第一個按鈕的點選事件
       ,btn2:function(index, layero){
                layer.close(index);
             }//第二個按鈕的點選事件
});

效果圖：

上面的這個方法還可以實現一些其他功能，因為我們已經拿到了彈窗框裡面的所以html內容，所以只要是在彈出框裡面的東西，我們想改什麼樣式就改什麼樣式了/手動滑稽

還有一個方法，也可以實現。那就是不要讓layer幫你在彈出框裡面加按鈕，你自己加，這樣子你就可以自己設定彈出框的各種屬性了。因為上面的content屬性裡面除了純文字外還可以加html語言的。程式碼如下：

layer.open({
    ,title:'提示框'
    ,type: 1 //Page層型別
    ,skin: 'layer-ext-moon'//面板
    ,area: ['300px', '180px']//彈窗框的長寬
    ,content:'<div style="padding:20px;">這裡是提示資訊</div>' +'<a onclick="" style="text-align: center;width: 50px;height:18px;margin:20px 30px;padding:10px;float:left;border: 1px solid #dedede;background-color: #f1f1f1;color: #333;border-radius: 2px;text-decoration: none;">btn1</a>'+
'<a style="text-align: center;width: 50px;height:18px;margin:20px   30px;padding:10px;float:right;border: 1px solid #dedede;background-color: #f1f1f1;color: #333;border-radius: 2px;text-decoration: none;">btn2</a>'
});

效果圖：

上面的程式碼好混亂- -，看著強迫症都上來了。

這種方法個人覺得太麻煩了，尤其是對於我這種幾乎沒有審美觀的人來說上面的那種方法就已經能夠滿足我了。但是如果你不覺得麻煩的話還是可以試試的。

嘔心瀝血寫出來的，轉載請一定註明出處！