使用 layer.open() 方法结合 layer.load() 实现加载动画效果。当用户在 layer.open() 中点击确定后，关闭当前弹窗并显示加载动画，同时执行其他指定的方法。
文章目录
使用 layer.open() 方法结合 layer.load() 实现加载动画效果。当用户在 layer.open() 中点击确定后，关闭当前弹窗并显示加载动画，同时执行其他指定的方法。
一、layer.open()属性介绍
1.属性：
二、layer.load()属性介绍
1.属性
示例代码：
一、layer.open()属性介绍
1.属性：
layer.open() 是 Layui 中用于创建弹出层的方法，它接受一个对象参数，可以包含以下属性：
type：弹出层类型，可选值有 1（信息框，默认值）、2（页面层）、3（iframe层）、4（加载层）和 5（tips层）。
title：弹出层标题，可以是String类型或者false（不显示标题）。
content：弹出层的内容，可以是String、jQuery对象或者DOM元素。
area：弹出层宽高，可以是String类型，如 '500px'，也可以是数组，如['500px', '300px']。默认值为'auto'，即自适应大小。
offset：弹出层位置，可以是String类型，如 '100px'，也可以是数组，如['100px', '50px']。默认值为'auto'，即居中显示。
shade：遮罩层，可以是Boolean类型或者数组，如[0.8, '#393D49']，分别表示遮罩层透明度和颜色。默认值为0.3，颜色为'#000'。
shadeClose：是否点击遮罩层关闭弹出层，可以是Boolean类型或者String类型，如'true'或'false'。默认值为false。
closeBtn：关闭按钮，可以是Number类型，如1表示只显示关闭按钮，或者是2表示同时显示标题栏右侧的关闭按钮和最小化按钮。也可以是false表示不显示关闭按钮。默认值为1。
maxmin：最大化和最小化按钮，可以是Boolean类型，表示是否显示最大化和最小化按钮。默认值为false。
anim：弹出层动画，可以是Number类型，表示弹出层的动画类型，或者是数组，如[0, 300]，表示动画类型和动画时间。默认值为0，即没有动画效果。
id：弹出层的唯一id，可以是String类型。
btn：弹出层的按钮组，可以是String类型，如'确定'，也可以是数组，如['确定', '取消']。默认值为'确定'。
btnAlign：弹出层按钮组的对齐方式，可以是String类型，有'r'（居右，默认值）、'c'（居中）和'l'（居左）三种取值。
yes：弹出层确定按钮回调函数，可以是Function类型。
btn2：弹出层取消按钮回调函数，可以是Function类型。
cancel：弹出层关闭按钮回调函数，可以是Function类型。
scrollbar：是否允许浏览器出现滚动条，可以是Boolean类型。默认值为true。
maxWidth：弹出层最大宽度，可以是String类型，如'500px'。
maxHeight：弹出层最大高度，可以是String类型，如'500px'。
resize：弹出层是否允许拉伸，可以是Boolean类型。默认值为true。
move：弹出层是否允许拖拽，可以是Boolean类型。默认值为true。
二、layer.load()属性介绍
1.属性
layer.load() 是 Layui 中用于显示加载层的方法，它接受一个对象参数，可以包含以下属性：
type：加载层类型，可以为0（默认风格）或1（自定义风格）。
shade：遮罩层，可以为Boolean类型或者数组，如0.3或[0.3, '#000']，分别表示遮罩层透明度和颜色。
shadeClose：是否点击遮罩层关闭加载层，可以为Boolean类型或者String类型，如'true'或'false'。默认值为false。
fixed：是否固定在可视区域，可以为Boolean类型。默认值为true。
anim：加载层动画，可以为Number类型，表示加载层的动画类型。默认值为0，即没有动画效果。
content：加载层的内容，可以为String类型或者数组，如['数据加载中', 'color:#fff']，分别表示加载层的文本和文本颜色。
time：自动关闭加载层的时间，可以为Number类型，单位为毫秒。默认值为0，即不自动关闭。
success：加载层弹出后的回调函数，可以为Function类型，如function(layero, index){}，其中 layero 表示加载层的 DOM 对象，index 表示加载层的索引。
style：自定义加载层的样式，可以为String类型，如'background-color: #009688; color: #fff;'。
示例代码：
下面为我整理的一个使用 layer.open() 方法结合 layer.load() 实现加载动画效果。当用户在 layer.open() 中点击确定后，关闭当前弹窗并显示加载动画，同时执行其他指定的方法的案例
//全选function selAll() {if ($("input[id='selAllNe']").is(':checked')) {$("input[name='FNEID']").prop("checked", true);} else {$("input[name='FNEID']").prop("checked", false);}}function NoNeedEntryBatch(layerindex, ids, nother) {//......此处省略代码var rowData = {"a": 1,"b": 2,"c": 3};$.ajax({data: {//封装的方法ajaxMethod: 'NoNeedEntryBatch',rowData: JSON.stringify(rowData),ids: ids,nother: nother},type: 'post',dataType: 'json',cache: false,async: false,success: function(data) {//成功后关闭加载等待layer.close(layerindex);if (data != null) {if (data.length > 0) {var filterdata = data.filter(function(value, index, self) {return value !== true;});if (filterdata.length == 0) {$.messager.alert('提示', "请假成功！");} else {$.messager.alert('提示', "请假失败！");}//此处刷新列表代码省略} else {$.messager.alert('提示', "请假失败!");}}},error: function(err) {console.log(1);layer.close(layerindex);console.log(err);}});}//其他方法，与NoNeedEntryBatch雷同function NoNeedEntryData(ids, nother) {}
</script>
在上述代码中，我们使用了 layer.open() 方法创建了一个弹窗，并在点击确定按钮时执行指定的方法。其中，layer.load() 方法在确定按钮被点击后被调用，用于显示加载动画效果。这个方法会创建一个遮罩层和显示加载图标的层。
我们这边重点说明下这个使用加载动画，使用setTimeout()调用其他方法执行，为什么要使用 setTimeout() 呢？这是因为 JavaScript 是单线程执行的，如果不使用 setTimeout() 函数，可能会导致弹窗和加载动画效果同时被执行，从而导致加载动画效果无法完全显示或者被其他操作遮挡。使用 setTimeout() 函数可以让加载动画效果有足够的时间被完全显示在用户界面中，同时不会影响其他操作的执行。我们只需要给0.5秒等待即可。
有需要的小伙伴可以打开vscode创建一个html进行测试，效果图如下：
勾选之后点击确定，这边加载一下便消失了，是因为我的ajax方法无法调用通，可以写一个能执行的ajax方法，此处省略…
以上就是使用 layer.open() 方法结合 layer.load() 实现加载动画效果。当用户在 layer.open() 中点击确定后，关闭当前弹窗并显示加载动画，同时执行其他指定的方法。介绍，如有错误，还请指正。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_42064877/article/details/132045744
![[极客大挑战 2019]LoveSQL 1](https://img2024.cnblogs.com/blog/3518346/202409/3518346-20240912233041539-1835399771.png)
![[NLP/AIGC] 大语言模型：零一万物](https://blog-static.cnblogs.com/files/johnnyzen/cnblogs-qq-group-qrcode.gif?t=1679679148)
