JQuery Popup仅可触发一次，无法重置问题求助

问题根源 #

你这段代码混用了原生JS和jQuery操作元素显示状态，导致弹窗第二次无法触发：

• 第一次点击时，通过原生JS给弹窗添加show类让它显示
• 3秒后用jQuery的fadeOut方法淡出弹窗，这个方法会把元素的CSS display属性设置为none
• 回调里只移除了show类，但**display: none的状态没有被恢复**，所以再次点击添加show类时，元素还是处于隐藏状态

修复方案（两种可选） #

方案1：统一用jQuery操作，恢复元素显示

修改JS代码，在每次触发时先恢复弹窗的显示状态，再添加show类：

function myFunction$users5() {
  var $pop = $('#myPopup$users5');
  // 先恢复显示，清除之前的fadeOut状态
  $pop.stop().show().addClass("show");

  setTimeout(function() {
    $pop.fadeOut('fast', function() {
      $(this).removeClass("show");
    });
  }, 3000);
}

方案2：用原生JS实现淡出，避免jQuery干扰

如果不想用jQuery，用原生CSS过渡实现淡出效果，保持操作统一：

function myFunction$users5() {
  var pop = document.getElementById("myPopup$users5");
  // 重置样式，确保初始状态正确
  pop.style.opacity = '1';
  pop.style.display = 'block';
  pop.classList.add("show");

  setTimeout(function() {
    // 添加淡出类（需要提前在CSS里定义过渡）
    pop.classList.add('fade-out');
    // 过渡结束后重置状态
    pop.addEventListener('transitionend', function endTransition() {
      pop.classList.remove("show", "fade-out");
      pop.style.display = 'none';
      pop.removeEventListener('transitionend', endTransition);
    }, { once: true });
  }, 3000);
}

对应的CSS需要添加：

.popuptext {
  /* 保留原有样式，新增过渡属性 */
  transition: opacity 0.3s ease;
}
.popuptext.fade-out {
  opacity: 0;
}

额外说明 #

• 尽量避免混用原生JS和jQuery操作同一个元素的显示状态，很容易出现这类属性冲突问题
• 如果使用jQuery的动画方法，后续相关操作尽量统一用jQuery处理，确保状态一致

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