如何让Shopify的邮件订阅弹窗15秒后自动关闭？

要实现无论用户是否点击关闭按钮，弹窗都在15秒后自动关闭，只需在现有代码中添加JavaScript定时器逻辑，具体步骤如下：

1. 核心代码实现 #

在你的Liquid文件中，找到弹窗相关的脚本区域，添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  // 获取弹窗元素（根据你实际的弹窗类名调整）
  const emailPopup = document.querySelector('.email-popup');
  // 获取关闭按钮元素
  const closeBtn = document.querySelector('.close-popup');

  // 统一的弹窗关闭函数
  function closePopup() {
    // 隐藏弹窗，和你现有关闭逻辑保持一致
    emailPopup.classList.add('hidden'); // 若你用display控制，可替换为emailPopup.style.display = 'none'
    // 清除定时器，避免手动关闭后仍触发自动关闭
    if (popupTimer) clearTimeout(popupTimer);
  }

  // 设置15秒后自动关闭的定时器（15000毫秒 = 15秒）
  let popupTimer = setTimeout(closePopup, 15000);

  // 绑定关闭按钮的点击事件
  if (closeBtn) {
    closeBtn.addEventListener('click', closePopup);
  }
});

2. 代码说明 #

• DOMContentLoaded：确保页面DOM加载完成后再执行脚本，避免找不到弹窗或按钮元素。
• setTimeout：触发15秒后的自动关闭操作，和手动关闭共用同一个closePopup函数，保证逻辑统一。
• 清除定时器：当用户手动点击关闭按钮时，同步清除定时器，防止弹窗已关闭后，定时器仍试图执行关闭操作引发潜在问题。

3. 适配现有代码 #

如果你的弹窗使用了特定的隐藏类或其他样式逻辑，只需调整closePopup函数内的隐藏方式，和你现有代码保持一致即可。

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