layui layer 自定义皮肤真香警告

不试不知道，一试真的香，layui的弹窗界面做的太人性化了，还能自定义皮肤，我感觉我捡到宝了。嘻嘻
作为一个csser，怎么能不自己试一下呢？
温馨提示框

墨绿色风格，最近很喜欢这个风格，简直不要太好看

通用框

感觉我的审美有些尴尬，我还是挺纠结的一个人。
下面记录一下要怎么配置，
首先需要在 layui 文件夹下面新建一个文件，我取名为 skin，在 skin 下新建一个 css 文件，我这里取做 style.css，然后就是去我们的页面中加载这个 css 文件，extend就是路径名称，一般是相对于当前的html文件目录

现在就已经加载好这个css了，就可以在使用layer的时候去使用skin这个option，但是css还没写，需要先写好css，其实就是给layui生成的类添加新的样式。
如果想让所有的layer都使用一个样式，就可以统一在config里添加skin，但一般都做不到一致，因为询问框，tips这些的显示内容不同，所以我都是在特定的层里添加。
怎么写css呢？
下面是官网的实例：

body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}

复制到style.css里面，在layer.open里添加skin：'demo-class'这个 option，看看效果
我的layer.open配置如下，

   //移动到右下角layer.open({type: 1,id: '9998', zIndex: layer.zIndex //重点1, title: '@Resources.Language.remind', content: '<p style="padding:1rem .5rem;text-align:justify;">@Resources.Language.remindContent</p>', offset: 'rb', btn: '@Resources.Language.know', btnAlign: 'c' //按钮居中, shade: 0 //不显示遮罩, anim: 1, fixed: true, skin: 'demo-class', yes: function (index, layero) {//do somethinglayer.close(index); //如果设定了yes回调，需进行手工关闭}});

显示如下：

就是这么简单der，就修改了弹窗的皮肤，还想修改其他地方咋办，直接F12康康它们的选择器，copy过来在css里重写就ok啦！

layui layer 自定义皮肤真香警告相关推荐

几天时间【免费】搭建了自己的个人博客，免租服务器，免买域名，真香警告。
几天时间搭建了自己的个人博客,免租服务器,免买域名,真香警告. 刚花了几天搭建了个网站,先上链接,欢迎来访:染墨小白的博客现在市面上的博客很多,如CSDN,博客园,简书等平台,可以直接在上面发表,用 ...
iPhone11新机拆解告诉你基带是哪家的，真香警告在路上，资源上新。
iPhone11拆解图前几天啊iPhone11发布,据了解现在预订量好大啊,可能大家忘了iPhone11用的是什么基带,今天小宅宅给大家分享一下iPhone11内部拆解图,详细告诉大家iPhone1 ...
在M1芯片上跑原生Linux：编译速度比macOS还快40%，真香警告
Alex 发自凹非寺量子位 | 公众号 QbitAI 现在,M1 Mac可以顺利运行原生Linux了. 专为苹果自研芯片打造的Asahi Linux项目,Alpha版本已经释出. 在Mac采用英特 ...
真香警告！2021Android高级面试题，挥泪整理面经
前言这是"拔剑金九银十"的第二篇文章,本文主要针对3年以上的Android开发者进阶面试中高级开发工程师而整理. 希望可以对你们有所帮助.不多废话,进入正题. 目录: Java中 ...
语音唤醒真香警告，轻松开启与Siri、小度和小爱的畅聊
"Hey Siri,给我讲个故事吧",这时Siri熟悉的机械女声从你手机传出,娓娓讲述起一段故事. "Hey Siri"是iOS8中新添加的唤醒Siri的方式, ...
情人节福利，恋爱话术微信小程序它来了（开源，看了就懂~，2万字真香警告）
1.前言在大家眼中,有没有觉得女神就像冰山美人一样?在聊天中对你是很高冷,或者是忽冷忽热,爱理不理.很多男生面对这个问题都束手无策,或者女神不理你时,又急着发短消息过去了,结果女神根本不理睬你.那怎 ...
真香警告：即使不用饿了么订餐，也请务必收藏好该库！
[公众号回复 "1024",免费领取程序员赚钱实操经验] 今天章鱼猫给大家分享的这个开源项目啊,绝对的香,非常的香.因为实在太好用了. 今天分享的开源项目是:一款基于 MVP 架构 ...
白嫖一份饿了么外卖，真香警告来了
下边是福利送红包时间饿了me外卖冬日送温暖! 什么时候结束不知道,目前我是享受到了红包金额随机,详细看下方图片吧! 活动真实有效,如果假你来抽我! 每天都可领一次如果领个十多块免费吃顿外卖 ...
Android性能优化常见问题，真香警告
前言想要成為一名優秀的Android開發,你需要一份完備的知識體系,在這裏,讓我們一起成長為自己所想的那樣. 金九银十是大家的換工作潮,在這波浪潮裡沉浮的我經歷過快一個月的面試後,決定把這些遇到的 ...
bmwaicoder使用教程_真香警告！分享一个老款3系改大屏幕+carplay的过程
相信坛子里有少3系车主,前段时间LZ自己的车刚刚升级了大屏幕和carplay.觉得还挺香的,价格也不贵,这里给大家分享一下.不是商家,因此不存在任何广告~全部下来费用3100+. PS:此贴分享的仅针 ...

layui layer 自定义皮肤真香警告

layui layer 自定义皮肤真香警告相关推荐

最新文章

热门文章