使用 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