layer的多种弹窗汇总,多种弹窗的图码结合,持续更新中

本文介绍了JavaScript库layer的基本用法,包括layer.msg用于简单提示和layer.alert创建对话框的功能。详细展示了如何添加图标、时间参数、自定义按钮和皮肤颜色,提供代码示例,并鼓励读者尝试和点赞。
摘要由CSDN通过智能技术生成

好看的提示,layer带你轻松实现,我不是弹窗的制造者,我只是layer的测试搬运工,希望给更多的人分享一下我的总结。
一、layer.msg

  • 直接提示:
layer.msg('没有参数的layer.msg');

在这里插入图片描述

  • 添加小图标:
    我们经常用到的提示性信息,可以加时间参数和其他标识
layer.msg('1:绿色的勾', {time: 2000, icon:1});

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

  • 添加按钮和图标
layer.msg('添加按钮和图标', {
    time: 20000, //20s后自动关闭
    btn: ['明白了', '知道了'],
    icon:1
});

在这里插入图片描述
二、layer.alert

  • 直接应用layer.alert();
    在这里插入图片描述
  • 添加图标参数和风格
layer.alert('内容', {
  icon: 1,
  skin: 'layer-ext-demo' //见:扩展说明
})
  1. layer-ext-demo:默认白色,
  2. layui-layer-molv:扩展墨绿
  3. layui-layer-lan :扩展深蓝
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
    当然也可以自定义皮肤颜色,如下所示我做一个自定义的深红色的那种。其实就是调整新增加一个样式属性如下所示:
body .layui-layer-red .layui-layer-title{background-color:#CC3333;
		color:#fff; border: none;}

然后再采用刚才的形式就可以实现红色的背景头部:
在这里插入图片描述
2021年,遇见你们真好,喜欢的可以点个赞关注一哈,持续为您搬砖

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT黄大大

有您的支持我将毕尽一生精力为您

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值