layer遮罩层简单的遮罩层

在这里提供一个简单layer遮罩层，想深入了解可以进入 layer官网多多学习哦。

先看下HTML页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>layer遮罩层</title><link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/csd97/H-ui.min.css" />　
</head>
<body><center><a href="javascript:;" onclick="easy()">点我</a></center>
</body>
</html><script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__ROOT__/Public/admin/lib/layer/2.4/layer.js"></script><script>function easy(){var content='<form action={:U(actInsGoods)} method="post" class="form form-horizontal" id="form-member-add">'+ '<div class="row cl">'+ '<label class="form-label col-xs-4 col-sm-3">名称</label>'+ '<div class="formControls col-xs-8 col-sm-9">'+ '<input type="text" class="input-text" name="name">'+ '</div>'+ '</div>'+ '<div class="row cl">'+ '<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">'+ '<input class="btn radius" type="submit" value="提交">'+ '<input class="btn radius layui-layer-close" type="submit" value="取消">'+ '</div>'+ '</div>'+ '</form>';layer.open({type: 1,area: ['400px','300px'],fix: false, //不固定
            maxmin: true,shade:0.4,title: '标题',content: content});}
</script>

　　页面的内容只需拼接进去就行，样式可以自己定义，也可以参考下代码中的示例

　　下面看下运行结果

layer.js 可以从 layer官网下载一份， layer弹出组件中也有非常好的示例

这里的样式借用 H-ui前端框架的，也是比较实用，强大的。

以上就是简单的遮罩层，比较粗糙，仅供参考。

转载于:https://www.cnblogs.com/csd97/p/8085087.html

layer遮罩层简单的遮罩层相关推荐

一个简单的遮罩弹出层效果
为什么80%的码农都做不了架构师?>>> 打酱油的日子就是要多学习下,最近在学写JS类库,虽然有面对对象语言的基础,但是感觉入手前端还是压力很大,就JS来说,干了半年了,水准还 ...
html遮罩层动画制作,flash简单制作遮罩动画效果
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...
unity新动画系统之动画层和动画遮罩
这一节来说说unity动画层layer和遮罩avatarMask: weight 权重,对应着这一层动画在所有层动画中所占的比例.以上图来说明,new layer中的weight为0,模型的动画效果就 ...
element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面? bug演示: 代码逻辑调整之后,页面就正常了(代码和效果图 · 见下文): 解决办法: 将dialog组件剪贴到最父级div元 ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
遮罩层与被遮罩层的闪烁问题
目录在一个盒子上设置一个遮罩层时出现的闪烁问题:即遮罩层与被遮罩层交替显示问题被遮罩层: 遮罩层: 原因在于: 解决方法可以为: 在一个盒子上设置一个遮罩层时出现的闪烁问题:即遮罩层与被遮罩层交替 ...
layui如何存在多个弹窗_web前端：layer重复弹出(layui弹层同时存在多个)的解决方法...
layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(前端开发工程师).layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力.其意义在于,可以让您的页面拥有更丰 ...
layer重复弹出(layui弹层同时存在多个)的解决方法
layer重复弹出(layui弹层同时存在多个)的解决方法参考文章: (1)layer重复弹出(layui弹层同时存在多个)的解决方法 (2)https://www.cnblogs.com/sird ...

layer遮罩层简单的遮罩层

layer遮罩层简单的遮罩层相关推荐

最新文章

热门文章

layer遮罩层 简单的遮罩层

layer遮罩层 简单的遮罩层相关推荐

最新文章

热门文章

layer遮罩层简单的遮罩层

layer遮罩层简单的遮罩层相关推荐