1、基本使用
layer是一款近年来备受青睐的web弹层组件。
layer可以独立使用，也可以通过Layui模块化使用。
- layer独立使用时，先下载组件包（官方下载地址：[https://layer.layui.com/] (https://layer.layui.com/)）然后在页面引入jQuery1.8以上的任意版本和layer.js即可使用。
- layui 模块化使用，只需要声明layer模块即可（前提是layui .css、layui.js引入完成）。
<script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> <script type="text/javascript"> layui.use('layer', function(){ var layer = layui.layer; layer.msg('哈哈哈，我是提示框') }); </script>
2、弹层样式
layui提供的样式非常多，下面只介绍了几种样式的使用，更多可参考官网 https://layer.layui.com/。
基本使用方法：
layer.样式名（'内容'，{参数。。。}）,适用于大部分样式。
弹窗层（layer.alert （））
image.png
<script type="text/javascript"> layui.use('layer', function(){ var layer = layui.layer; layer.alert('我是一个带确定的弹窗',{ title:'这里是标题', //标题 time:3000 //持续时间 3000ms毫秒 }) }); </script>
询问层（layer.confirm（））
所谓的询问层就是添加了按钮供你选择，不同的按钮对应着不同的函数，注意括号！！！，嵌套了几层之后，括号个数很容易把人搞蒙！
image.png
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
layer.confirm('您是男娃还是女娃？', {
btn: ['男娃','女娃'] ,//按钮
icon:3
},
function(){ //点击第一个按钮调用的方法
layer.msg('真好我也是', {icon: 6});
},
function(){ //点击第二个按钮调用的方法
layer.confirm('你单身嘛', { //这里面依然可以嵌套
icon:3,
time: 20000, //20s后自动关闭
btn: ['单身', '双身'],},
function(){layer.msg ('真好俺也是',{icon: 6})},
function(){layer.msg ('妖孽！')
});
});
})
</script>
tips层（layer.tips（））
tips可以需要绑定具体元素（#id、.class），可以更改颜色和出现的位置。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
layer.tips ('hhh','#div',{
tips: [1, '#aaff7f'] , //还可配置颜色 ,1是出现在上面,2右面（默认），3下面，4左面
time:5000, //持续5秒
});
})
</script>
<body>
<div id="div" style="height: 100px;width: 300px;background-color: #007DDB;margin: 100px auto;">
我是被绑定的元素，tips出现在我的上方
</div>
</body>
</html>
提示层（layer.msg（））
image.png
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
layer.msg ('您的手机已欠费，请续交话费',{
time:5000,
icon:1 //显示图标
});
})
</script>
加载层（layer.load（））
一共有三种加载风格，0、1、2。
image.png
<script type="text/javascript"> layui.use('layer', function(){ var layer = layui.layer; layer.load(0 ,{ //0代表加载的风格，支持0-2 time:2000 }); }) </script>
3、基础参数
layui提供了很多参数，方便我们完善弹窗的功能和美化样式，下面列举了几个参数，提供参考，详细请看官网文档https://www.layui.com/doc/modules/layer.html。
layer.样式名（'内容'，{参数。。。}）这些属性写在{ }内即可，用逗号分隔。
面积（area）
area: ['500px', '300px'], //设置宽和高 , area：100px，只定义宽高度自适应持续时间（time）
time:3000, //持续时间图标（icon）
icon:6,
图标对应数字.png
样式（skin）
样式也可以自设计，具体就看文档吧！，下面是layer自带的两款样式。
skin: 'layui-layer-molv', //layui-layer-lan（墨蓝色）、layui-layer-molv（墨绿色）
image.png
关闭按钮（closeBtn）
closeBtn: 1 ,//关闭按钮 0：无、 1：x、 2：⚪+x
image.png
弹出动画（anim）
anim:1, //1~6是动画，不想显示就设置-1
image.png
栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
layer.alert('大部分属性',{
// area: ['500px', '300px'], //设置宽和高 area：100px，只定义宽高度自适应
title:'设置标题',
time:3000, //持续时间
skin: 'layui-layer-lan', //layui-layer-lan（墨蓝色）、layui-layer-molv（墨绿色）
offset: ['200px', '600px'], //上、左坐标
closeBtn: 2 ,//关闭按钮 0：无、 1：x、 2：⚪+x
icon:3,
anim:1, //1~6是动画，不想显示就设置-1
})
})
</script>
<body>
</body>
</html>
image.png
网友评论