前端框架layui之layer弹出层学习笔记

layui框架中layer弹出层。

引入js文件和对应模块：

首先引入模块化组件的js文件：

<!-- 如果需要使用模块，则引入layui.js文件 -->
<script type="text/javascript" src="../layui/layui.js"></script>

注意：上面的文件路径写自己的路径。

然后通过模块化方式，使用layer弹出层，那么必须先自己引入对应的模块，引入模块代码如下：

<script type="text/javascript">
    // 引入layui内置的jquery模块和layer弹出层模块
    layui.use(['jquery','layer'], function() {
        // 声明对应的变量
        var $ = layui.$, layer = layui.layer;

        // 下面就可以写其他代码了
    });
</script>

弹出提示层：

<script type="text/javascript">
    /*
	    使用layui中的模块，需要先加载相应的模块组件。
	    layui.use(加载的组件, 执行的回调方法);
    */
    layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;
	/*
		弹出提示层：
		layer.msg(提示信息);
		layer.msg(提示信息, {参数配置});
	*/ 
	layer.msg("Hello World");
});
</script>

打开浏览器访问自己写的html页面，页面弹出如下效果：

至于上面的参数配置，可以查看layui官网：https://www.layui.com/doc/modules/layer.html#use

弹出页面层：

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
    var layer = layui.layer,$ = layui.$;
    
    // 弹出页面层
    layer.open({
        type:1,
        title:['页面层标题','font-size:18px;color:red;'],
        area:['200px','100px'],
        content:"弹出页面层"
    });
});
</script>

使用格式：
layer.open({参数配置});

参数配置(可选)：

type:表示层类型。取值：0(信息框),1(页面层),2(iframe层),3(加载层),4(tips层)。
title:层标题。还可以自定义样式。例如：title[‘标题’,’font-size:18px;color:red;’]。
area:设置宽高。第一个表示宽，第二个表示高。
content:层内容。可以直接写字符串, url, 还可以写通过id选择到的内容$(“#id”)。

上面代码执行效果：

弹出框：

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
    var layer = layui.layer,$ = layui.$;

    // 弹出框
    layer.alert("学习layui", {
        title:"弹出框",
        // icon的值可以取0-6
        // icon取值不同,显示的图标不同
        icon:0
    });
});
</script>

icon取值不同，不同效果如下：

注意：所有的参数配置在可以任意层使用。

基于信息框模式，添加按钮，并且执行回调函数：

<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// 给信息框添加按钮
	layer.confirm('确认框添加两个按钮', {
		btn:['确定','取消'],
		// 点击“确定”按钮之后的回调方法
		btn1:function(index, layero) {
			layer.msg('确定成功啦', {icon:6});
		},
		// 点击“取消”按钮之后的回调方法
		btn2:function(index, layero) {
			layer.msg('点击了取消按钮', {icon:5});
		}
	});
});
</script>

显示效果：

按钮可以无限多个，只要添加即可，然后如果要添加回调函数，只需和上面代码一样，在后面添加即可。

如果想让按钮的回调函数不执行，那么只需要添加return false即可。代码如下：

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// 给信息框添加按钮
	layer.confirm('确认框添加两个按钮', {
		btn:['确定','取消'],
		// 点击“确定”按钮之后的回调方法
		btn1:function(index, layero) {
			layer.msg('确定成功啦', {icon:6});
		},
		// 点击“取消”按钮之后的回调方法
		btn2:function(index, layero) {
			// 取消回调
			return false;
		}
	});
});
</script>

按钮对齐方式(btnAlign)：

layui提供了三种对齐方式：左对齐、居中对齐、右对齐。

用法：

btnAlign：’l’；左对齐；
btnAlign：’c’；居中对齐；
btnAlign：’r’；右对齐；

当做json属性直接使用即可。注意：三个属性的属性值必须小写。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// 给信息框添加按钮
	layer.confirm('确认框添加两个按钮', {
		btn:['确定','取消'],
		// 点击“确定”按钮之后的回调方法
		btn1:function(index, layero) {
			layer.msg('确定成功啦', {icon:6});
		},
		// 点击“取消”按钮之后的回调方法
		btn2:function(index, layero) {
			layer.msg('点击了取消按钮', {icon:5});
		},
		// 按钮居中对齐方式
		btnAlign:'c'
	});
});
</script>

上面代码实现居中对齐效果：

可以修改btnAlign的属性值，分别进行左对齐和右对齐，效果如下：

关闭按钮属性(closeBtn)：

可以取值有：0和1，或者true或false。默认取值是1。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// 关闭按钮
	layer.confirm('是否显示关闭按钮', {
		closeBtn:1
	});
});
</script>

取值为1时，效果如下：

当取值为0时，不显示关闭按钮：

关闭按钮的回调函数(cancel)：

cancel属性是当点击右上角的关闭按钮时，设置执行的回调函数。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// cancel的回调
	layer.open({
		type:1,
		title:"cancel的回调",
		content:"cancel的回调",
		cancel:function(index, layero) {
			console.log("当前索引:" + index + ",当前DOM对象：" + layero);
		}
	});
});
</script>

点击关闭按钮，效果如下：

为弹出层添加遮罩(shade)：

遮罩shade透明度属性默认取值0.3的黑色背景，除了可以设置透明度，还可以设置其他样式。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
    var layer = layui.layer,$ = layui.$;

    // 关闭按钮
    layer.confirm('遮罩设置', {
        // 透明度设置0.8，背景颜色红色
        shade:[0.8,'red']
    });
});
</script>

效果如下：

如果不需要遮罩，就可以设置shade等于0。

点击遮罩是否关闭(shadeClose)：

shadeClose表示点击遮罩层，是否关闭遮罩。shadeClose取值有true和false。默认取值false。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// 关闭按钮
	layer.confirm('是否显示关闭按钮', {
		shade:[0.8,'red'],
		// 点击遮罩关闭
		shadeClose:true
	});
});
</script>

设置自动关闭时间(time)：

time属性可以设置弹层的自动关闭时间，取值是毫秒。注意：1秒等于1000毫秒。默认取值0，即不自动关闭。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	layer.msg('设置2秒自动关闭', {
		// 设置图标样式
		icon:6,
		// 设置自动关闭2000毫秒
		time:2000
	});
});
</script>

弹层动画效果(anim):

anim的取值有0-6，每一个数值表示一种效果。默认取值是0。

0表示平滑放大。
1表示从上掉落。
2表示从最底部向上滑入。
3表示从左滑入。
4表示从左翻滚出现。
5表示逐渐出现。
6表示抖动出现。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// 动画效果
	layer.msg('提示框动画效果', {
		icon:6,
		// 抖动效果
		anim:6
	});
});
</script>

最大最小化效果(maxmin)：

maxmin属性用于设置弹出层是否能够最大最小化。默认取值false。想要使用该效果，则可以设置为true。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// 最大最小化
	layer.open({
		type:1,
		area:['300px','150px'],
		content:'最大最小化测试效果',
		// 开启最大最小化
		maxmin:true
	});
});
</script>

效果如下：

设置弹出层不可拉伸(resize)：

resize属性可以设置弹出层是否可以通过鼠标进行拉伸变换。默认取值为true，即：可拉伸变换。设置为false即不可拉伸。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// resize拉伸变换
	layer.open({
		title:"resize拉伸变换",
		content:"resize拉伸变换",
		// 设置不可拉伸
		resize:false
	});
});
</script>

监听窗口拉伸动作(resizing):

当我拉伸窗口时，可以通过resizing属性的回调函数，获得当前的DOM对象。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// resizing监听拉伸变换
	layer.open({
		title:"resizing拉伸变换",
		content:"resizing拉伸变换",
		// 执行拉伸变换的回调函数
		resizing: function(layero) {
			// 输出当前DOM对象
			console.log(layero);
		}
	});
});
</script>

弹出层成功后的回调(success)：

success属性是当一个弹出层弹出之后，执行的回调函数。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// success回调
	layer.open({
		type:1,
		title:"success回调",
		// 成功弹出层后回调方法
		success:function(layero, index) {
			// layero表示当前DOM对象，index表示当前层索引
			console.log(layero + "," + index);
		}
	});
});
</script>

打开控制台，效果如下：

关闭弹层(close):

通过layer.close(index)可以关闭索引是index的弹出层。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// close关闭弹出层
	layer.open({
		content:"close关闭弹出层",
		// 弹出完成执行回调
		success:function(layero, index) {
			// 关闭弹层
			layer.close(index);
			// 弹出提示
			layer.msg('弹层关闭啦', {icon:6});
		}
	});
});
</script>

效果如下：

内置方法：

普通信息框alert()：

格式：layer.alert(提示信息，{配置参数}，回调函数);

上面的提示信息，配置参数，回调方法是可选的。

注意：当自己写了回调函数时，如果自己没有写关闭弹层代码，则当点击确定按钮时，不会有效果。

<script type="text/javascript">
layui.use(['jquery','layer'], function() {
	var layer = layui.layer,$ = layui.$;

	// alert()弹框一
	// layer.alert('这是alert()弹框');

	// alert()弹框二
	// layer.alert('alert()弹框二', {icon:6});

	// alert()弹框三
	layer.alert('alert()弹框三', {icon:6}, function(index) {
		// 如果没有写这句代码,当点击“确定”按钮时，不会关闭弹层
		layer.close(index);
	});

});
</script>

效果如下：