初识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程序猿,欢迎交流

				
时间: 2024-10-07 08:33:45

初识layer遮罩层的相关文章

HTML兼容性 不声明doctype,IE9标准模式下position:fixed定位失败,导致遮罩层(Mask Layer)显示在页面最下方,FF和Chrome正常

问题描述:ie9标准模式下,老系统中的页面很少有写doctype的,但是不写这个声明,浏览器对于文档的解析机制就不一样了,特别是对于table和样式中的width, height 为100%布局,以及高度自适应的实现方案有影响,不了解的可以自行百度先,那么不写的话,又想加1个遮罩层的效果,一般我们遮罩层是借助position绝对定位实现的,可以写fixed,也可以写absolute,设置为fixed的时候,文档没有doctype,就会导致遮罩层出现在文档最下方,而不是绝对定位的效果,切换为ie9

初识layer 快速入门

http://layer.layui.com/hello.html 如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,去认识她. 开始了解 第一步:部署 下载layer后,把它部署到你项目中的任何一个目录(当然,我们推荐放在前端相关目录里),你不能去挪动layer里面的文件结构,因为它们是不可拆散的组合.就像这样: 第二步:引入 亲爱的,你不必去管那些文件是干嘛的,你只需要认准一个文件:layer.js 没错,当你试图在页面呈现layer的时候,你应该这样

Android 遮罩层效果

(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果,如下图: 上面这个图片是圆形的,而我们这个原图是正方形的,所以我们可能就需要这么一个遮罩的效果使它变为圆形,这种一般就是我们图片从网络上获取的,形状不是由我们自己定的,所以才会加上这么一个效果,看下面的原图: 这个是一个正方形的,那么要弄这么一个圆形,我们还需要一个圆形全黑的图片,如下 就是这个图片

下载文件时遮罩层示例。

新需求是在原来的代码上进行优化查询. 优化完成之后导出功能还是需要1~3秒响应时间,毕竟数据量大,业务逻辑也较为复杂. 为了避免用户重复点击“导出”按钮,故写个遮罩层来示意用户当前正在发送下载的请求. 点击导出或下载按钮弹出遮罩层,由于无法判断文件什么时候在后台读取完,遮罩层什么时候消失成了关键. 思路是这样的: 在请求到后台下载的Servlet时,往Session中setAttribute一个值. 前台页面写个定时器,不断请求另外一个Servlet获取Session中set的值,当值为空字符串

点击弹出居中的遮罩层,背景变暗

点击弹出层特效代码,网页上已经有很多类似的代码了,使用挺广泛的,代码先判断浏览器的版本,ie6创建的div样式和非ie6创建的div样式在解析时有点区别,为了兼容性考虑,才加了判断,虽然实现的有点粗糙,不过从实现的方法来说,容易理解,便于修改完善. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

cocos2dx 遮罩层 android 手机上 失败

1.CCClippingNode使用(在模拟器上ok,在手机上不行),实现多个剪切区域 local layer=CCLayerColor:create(ccc4(0,0,0,110)) --/*创建剪裁节点*/ local pClip=CCClippingNode:create() pClip:setInverted(true)--;//设置是否反向,将决定画出来的圆是透明的还是黑色的 pClip:setAlphaThreshold(0.0) self:addChild(pClip) --/*注

CSS创建一个遮罩层

.layer{ width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; -moz-opacity: 0; filter: alpha(opacity=50); z-index: 99; height: 100%; margin:0 auto; } 创建一个遮罩层. CSS创建一个遮罩层

遮罩层的创建

遮罩层,顾名思义,是对图层的某一部分进行遮罩,具体遮罩那一部分,又是如何实现呢? 如果我们画一个矩形,并且把该图层作为遮罩层,那么,我们所遮罩的是该矩形以外的内容,而且遮罩层仅对遮罩的图层起作用! 具体创建步骤如下: 1.新建一个图层,创造图像 2.零件一个图层,对原图层想显示部分做框选图形 3.右键新创建的图层为遮罩层 完成

Winform应用程序实现通用遮罩层

Winform应用程序实现通用遮罩层 在WEB上,我们在需要进行大数据或复杂逻辑处理时,由于耗时较长,一般我们会在处理过程中的页面上显示一个半透明的遮罩层,上面放个图标或提示:正在处理中...等字样,这样用户体验就比较好了,然而如果在Winform客户端程序,通常遮罩层的处理就显得不那么简单或不那么好看,而我今天要说明的是,我实现的这个Winform通用遮罩层,却可以实现类似WEB上的遮罩层,既可以透明,而且还可以显示动态图片以及文字,那如何实现的呢,我现在一一讲解. 首先要明确我们要实现的效果