初识layer遮罩层

Posted 2020-10-03 在路上的牛小牛

背景：楼主做了一个先删除数据再插入的功能，但是狂点菜单的时候会有重复数据插入进来，设置字段unique之后，再狂点，控制台也会报错。

为了防止这种问题出现，我采取了制止”狂点“这种行为出现的做法，所以采用了layer的遮罩效果，当遮罩出现的时候菜单不可点击，嘻嘻，如果大家有好的办法，欢迎交流，联系方式在结尾处。

 

在官网下载最新的layui如下：

 ├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件     

 然后将js和css引入在页面中，注意路径，如果没效果，可以在网页源代码中查看是否引入

<link rel="stylesheet" href="static/layui/css/modules/layer/default/layer.css">
<script src="static/layui/lay/modules/layer.js"></script>

实现遮罩的代码：停留10000毫秒自动消失 && 当遮罩出现的时候，页面上其他地方点击不了

<script>
    top.layer.load(2, {time: 1*10000});
</script>

效果图如下：

layer库很强大，可查看官方文档学习更多样式和操作

 

 

联系方式：

qq：214899764

一枚java程序猿，欢迎交流