自定义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:'系统提醒',

其他详情就可以查看layer官方API文档

如果使用了

自定义按钮或者链接在content里面，由于layer是新弹出窗口，是动态生成的新的元素，是没有事件的

所以使用$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，则触发此事件

 

转载于:https://www.cnblogs.com/zhengyuanyuan/p/8991136.html