在设置前端页面的时候,设置了确定和取消按钮,发现点击之后无法关闭弹窗。
$('#bonusScoreNameInput').click(function () { $.ajax({ url: ctxPath+"bonusOrsubtractOperation/clickBonusScoreSearch", type: 'GET', success: function (data) { // 在成功获取到内容后,打开弹窗并将内容填充到其中 layer.open({ id: "commentProjectEvent", // type: 1, title: '加分项', skin: 'layui-layer-rim', //加上边框 area: ['1150px', '600px'], content: data, btn: ['确定', '取消'], btn1: function (index, layero) { // 获取子页面中存储的选中数据 var selectedData = selectedDataInChildPage1; var selectedDataArray= JSON.parse(JSON.stringify(selectedData)) var bonusScoreNames = []; var scores = 0; var bonusScoreRules = []; selectedDataArray.forEach(function(item) { bonusScoreNames.push(item.bonusScoreName); scores += parseInt(item.score); bonusScoreRules.push(item.bonusScoreRules); }); // 合并数组中的值为一个字符串,以逗号分隔 var bonusScoreName = bonusScoreNames.join(','); var bonusScoreRule = bonusScoreRules.join(','); $('#bonusScoreNameInput').val(bonusScoreName) $('#bonusScoreRules').val(bonusScoreRule) $('#score').val(scores) layer.close(index) return false; // 阻止表单提交 }, btn2: function (index, layero) { layer.close(index) return false; // 阻止表单提交 }, cancel: function () { // 右上角关闭事件的逻辑 } }); } }) })
在我们使用的过程,发现layui官方文档给了模板中可以进行layer.open弹窗的时候设置按钮,如下
// eg1
layer.confirm('询问框?', {
btn: ['按钮1', '按钮2', '按钮3']
});
// eg2
layer.open({
content: 'test',
btn: ['按钮1', '按钮2', '按钮3'],
// 按钮1 的回调
btn1: function(index, layero, that){},
btn2: function(index, layero, that){
// 按钮2 的回调
// return false // 点击该按钮后不关闭弹层
},
btn3: function(index, layero, that){
// 按钮3 的回调
// return false // 点击该按钮后不关闭弹层
}
});
这样我们可以提交设置按钮,而且能够继续关闭弹窗操作