自定義layer彈出框樣式

 

由於公司進行頁面樣式迭代，UI設計師設計出新的彈出框頁面，但是與layer默認樣式差別很大，所以就必須制作新的皮膚。截取部分樣式如下：

html #layui_layer_skinspttradestylecss{
    margin: 0;
    padding: 0;
    border: 0;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}
body div.layui-layer-class .layui-layer-title{
    width: 100%;
    height: 40px;
    background: #EBF0FA;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    content: "";
    clear: both;
    display: block;
    box-sizing: border-box;
    padding: 0;
}

對於第一行代碼，主要是為了設計新的skin樣式作為擴展，規則就是：html #layui_layer_skin{文件夾名}{文件名}css

設置完之后就會發現谷歌瀏覽器自動加入

layui-layer-class
如圖：

但是之前有一個layui-layer是以前自定義的skin，不好刪除，並且在裝飾器模式中加載，沒能弄清楚的狀況就是加載總是優先級比我寫的樣式高，沒能找到具體原因，但是不影響我解決問題

所以我在layui-layer-class更改為div.layui-layer-class,這樣layui-layer-class優先級比layui-layer多1。

如果想不顯示layer的默認按鈕，定義

btn:false,

即可。標題可以直接這么顯示：

title:'<span class="system_prompt">系統提醒</span>',

其他詳情就可以查看layer官方API文檔

如果使用了

自定義按鈕或者鏈接在content里面，由於layer是新彈出窗口，是動態生成的新的元素，是沒有事件的

所以使用$(document).on("click","指定的元素",function(){});方法則是將指定的事件綁定在document上，而新產生的元素如果符合指定的元素，則觸發此事件