背景:楼主做了一个先删除数据再插入的功能,但是狂点菜单的时候会有重复数据插入进来,设置字段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遮罩层的更多相关文章

  1. layer遮罩层 简单的遮罩层

    在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...

  2. layer 遮罩层等待

    效果 代码: js函数之前:var msg = layer.msg('努力中加载中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,of ...

  3. 使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

    ------------------------------------------20180410补充------------------------------------------------ ...

  4. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

  5. 初识layer 快速入门

    http://layer.layui.com/hello.html 如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,去认识她. 开始了解 第一步:部署 下载l ...

  6. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  7. CSS创建一个遮罩层

    .layer{ width: 100%; position: absolute; left:; right:; top:; bottom:; -moz-opacity:; filter: alpha( ...

  8. js遮罩层弹出显示效果组件化

    1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; ...

  9. 学习layer弹层组件移动版

    layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层

随机推荐

  1. (转)Android项目重构之路:架构篇

    去年10月底换到了新公司,做移动研发组的负责人,刚开始接手android项目时,发现该项目真的是一团糟.首先是其架构,是按功能模块进行划分的,本来按模块划分也挺好的,可是,他却分得太细,总共分为了17 ...

  2. 数据库建模软件ERStudio-表关系建模详解

    ERStudio是优秀的数据库建模软件,它不仅可以建立表.视图等模型,还可以建立多表间各种关系的模型,另外还可以根据模型生成表到数据库,下面具体讲解一下它的表关系建模. 1. 首先讲一下怎么建立表关系 ...

  3. java中return的作用

    脑补一下基础的东西,return的用法. return的常用作用有以下两种第一种用法是返回参数所用的关键字,假如一个有返回值的方法执行完了之后需要返回一个参数,示例: public string fu ...

  4. 错误com.android.ddmlib.AdbCommandRejectedException

    错误com.android.ddmlib.AdbCommandRejectedException 学习了:https://blog.csdn.net/u014447072/article/detail ...

  5. js文件加载执行顺序

    转自:http://blog.163.com/water_down/blog/static/170276590201111711243458/ <script type="text/j ...

  6. [Erlang]Erlang经常使用工具解说

    原创文章,转载请注明出处:服务器非业余研究http://blog.csdn.net/erlib 作者Sunface 联系邮箱:cto@188.com 但凡有图形界面的都须要linux系统安装了wx图形 ...

  7. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何修改代码字体

    工具-选项   TwinCAT,PLC Environment,Text editor,然后在文本区域中修改字体     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i. ...

  8. PHP数组问题

    转换为数组 对于任意 integer , float , string , boolean 和 resource 类型,如果将一个值转换为数组,将得到一个仅有一个元素的数组,其下标为 0,该元素即为此 ...

  9. 最小公倍数 【杭电-HDOJ-1108】 附题+具体解释

    /* 最小公倍数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  10. Redis源代码解析:13Redis中的事件驱动机制

    Redis中.处理网络IO时,採用的是事件驱动机制.但它没有使用libevent或者libev这种库,而是自己实现了一个很easy明了的事件驱动库ae_event,主要代码只400行左右. 没有选择l ...