初识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(, {time: *});
</script>
效果图如下:

layer库很强大,可查看官方文档学习更多样式和操作
联系方式:
qq:214899764
一枚java程序猿,欢迎交流
初识layer遮罩层的更多相关文章
- layer遮罩层 简单的遮罩层
在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...
- layer 遮罩层等待
效果 代码: js函数之前:var msg = layer.msg('努力中加载中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,of ...
- 使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路
------------------------------------------20180410补充------------------------------------------------ ...
- 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题
最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...
- 初识layer 快速入门
http://layer.layui.com/hello.html 如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,去认识她. 开始了解 第一步:部署 下载l ...
- Android 遮罩层效果
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...
- CSS创建一个遮罩层
.layer{ width: 100%; position: absolute; left:; right:; top:; bottom:; -moz-opacity:; filter: alpha( ...
- js遮罩层弹出显示效果组件化
1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; ...
- 学习layer弹层组件移动版
layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层
随机推荐
- 两张表的笛卡尔积用sql语句
第一个表的行数乘以第二个表的行数等于笛卡尔积结果集的大小SELECT * FROM table1 CROSS JOIN table2
- Spark Streaming ReceiverTracker架构设计
本节的主要内容: 一.ReceiverTracker的架构设计 二.消息循环系统 三.ReceiverTracker具体实现 Spark Streaming作为Spark Core基础 架构之上的一个 ...
- ZT:没有谁的成功是横空出世
这世上,没有谁的成功是横空出世. 你看到的胸有成竹,是别人犯过错后的顿悟: 你看到的举重若轻,是别人跌过跤后的自省: 你看到的闪亮光环,是一个人咬牙走了很久的夜路,才为自己点亮的一盏灯. 你以为自己输 ...
- 给Swing的GUI组件设置前景色和背景色
JButton btn=new JButton("TEST"); btn.setForeground(Color.white);// 设置前景色(文字颜色)btn.setBackg ...
- Centos 7 搭建蓝鲸3.1.5社区版
第一次搭建蓝鲸平台,参考了蓝鲸社区的官方搭建文档. 友情链接:蓝鲸智云社区版V3.1用户手册 搭建时遇到了不少的坑,这里做一个详细的安装梳理 主机硬件要求 官方的推荐如下: 我在公司测试环境搭建时机器 ...
- Lucene Spatial构建地理空间索引
一.Maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- isset() unset()
检测变量是否设置,并且不是 NULL. 如果已经使用 unset() 释放了一个变量之后,它将不再是 isset().若使用 isset() 测试一个被设置成 NULL 的变量,将返回 FALSE. ...
- 算法笔记_088:蓝桥杯练习 8-1因式分解(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 设计算法,用户输入合数,程序输出若个素数的乘积.例如,输入6,输出2*3.输入20,输出2*2*5. 样例 与上面的样例输入对应的输出. ...
- java设计模式之模板方法
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8744002 今天你还是像往常一样来上班,一如既往地开始了你的编程工作. 项目经理告 ...
- Android Exception 9(requestFeature() must be called before adding content)
08-05 17:36:12.799: W/System.err(10378): java.lang.reflect.InvocationTargetException08-05 17:36:12.7 ...