如何通过调用.close() API关闭jQuery Lity弹窗表单？

嘿，我之前在项目里用Lity做表单弹窗时也踩过这个坑，咱们一步步来搞定它！

核心问题：你需要获取Lity的实例再调用.close() #

Lity的.close()方法不是直接绑定在DOM元素上的，而是需要调用在Lity弹窗实例上。如果直接给按钮绑定$(selector).close()肯定没用，得先拿到弹窗的实例对象。

具体实现步骤 #

1. 打开弹窗时保存实例

当Lity弹窗打开时，会触发lity:open事件，我们可以在这个事件里把弹窗实例存下来：

// 先声明一个变量存储实例
let lityModalInstance;

// 监听弹窗打开事件，保存实例
$('[data-lity]').on('lity:open', function(event, instance) {
  lityModalInstance = instance;
});

2. 给「关闭」按钮绑定点击事件，调用实例的.close()

假设你的弹窗里有这样一个关闭按钮：

<!-- 弹窗内的关闭按钮 -->
<button class="form-close-btn">关闭表单</button>

然后给这个按钮绑定点击事件，调用保存好的实例方法：

// 静态按钮直接绑定
$('.form-close-btn').on('click', function() {
  // 先判断实例是否存在，避免报错
  if (lityModalInstance) {
    lityModalInstance.close();
  }
});

// 如果是动态生成的按钮，用事件委托更稳妥
$(document).on('click', '.form-close-btn', function() {
  if (lityModalInstance) {
    lityModalInstance.close();
  }
});

备选方案：全局关闭方法 #

如果你当前页面只有一个Lity弹窗，也可以直接调用全局的lity.close()方法，不用保存实例：

$('.form-close-btn').on('click', function() {
  lity.close();
});

注意事项 #

• 检查你的关闭按钮有没有被其他代码阻止默认行为（比如event.preventDefault()或者return false），这会导致点击事件无法正常触发。
• 确保Lity的脚本已经正确加载，且代码是在DOM加载完成后执行的（可以包在$(document).ready()里）。

内容的提问来源于stack exchange，提问作者xam