初识layer遮罩层

背景：楼主作了一个先删除数据再插入的功能，可是狂点菜单的时候会有重复数据插入进来，设置字段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程序猿，欢迎交流