如何让jQuery Toast模态框同时支持自动淡出与点击关闭功能？

我有一个简单的jQuery Toast插件，目前运行正常，但希望将现有两种Toast的功能合并：让所有Toast同时具备点击关闭淡出和自动淡出关闭的特性（当前一种仅支持点击关闭，另一种仅支持自动关闭）。

原代码 #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<a href="#" class="toast-trigger" data-toast="toast-name-1">Normal Toast</a>
<a href="#" class="toast-trigger toast-auto" data-toast="toast-name-2">Auto FadeOut Toast</a>
<div class="toast-container toast-pos-right toast-pos-bottom">
  <!-- Toast -->
  <div class="toast" id="toast-name-1">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 1!</b>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <!-- Toast -->
  <div class="toast" id="toast-name-2">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 2!</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

CSS #

.toast-container {
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
}
[class*="toast-pos-"] {
  position: absolute;
  padding: 10px;
}
.toast-pos-top {
  top: 0;
}
.toast-pos-right {
  right: 0;
}
.toast-pos-bottom {
  bottom: 0;
}
.toast-pos-left {
  left: 0;
}
.toast {
  display: none;
  padding: 20px;
  margin: 20px 0;
  background: #eeeeee;
  color: #333333;
}
.close-toast {
  float: right;
  text-decoration: none;
  color: #ffffff;
  vertical-align: middle;
}
/* Aditional Styles */
body {
  padding: 60px 40px;
  background: #42A5F5;
  font-family: sans-serif;
}
.toast-trigger {
  color: #ffffff;  
}
.toast {
  background: rgba(255,255,255,.5);
  color: #FFFFFF;
}
.toast-trigger {
  display: inline-block;
  top: 50%;
  left: 50%;
  margin: 10px;
  padding: 20px 40px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
  transition: ease .2s;
}
.toast-trigger:hover {
  background: #ffffff;
  color: #009688;
}

JavaScript #

$(".toast-trigger").click(function(e){
  e.preventDefault();
  datatoast = $(this).attr("data-toast");
  if ( $( this ).hasClass( "toast-auto" ) && !$("#" + datatoast).is(":visible") ){ 
    $("#" + datatoast).fadeIn(300).delay(2000).fadeOut(300);
  }
  else if ( !$("#" + datatoast).is(":visible") ){
    $("#" + datatoast).fadeIn(300);
  };
});

$(".close-toast").click(function(e){
  e.preventDefault();
  closetoast = $(this).parent().attr("id");
  $("#" + closetoast).fadeOut(300);
});

修改方案 #

要实现所有Toast同时支持两种关闭方式，需要：

1. 移除触发按钮的toast-auto类判断，所有Toast显示后都启动自动关闭定时器
2. 手动点击关闭时，清除对应Toast的定时器，避免后续自动关闭触发
3. 优化逻辑，避免重复的可见性判断

修改后的完整代码 #

HTML（移除toast-auto类，统一触发逻辑） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<a href="#" class="toast-trigger" data-toast="toast-name-1">Normal Toast</a>
<a href="#" class="toast-trigger" data-toast="toast-name-2">Auto FadeOut Toast</a>
<div class="toast-container toast-pos-right toast-pos-bottom">
  <!-- Toast -->
  <div class="toast" id="toast-name-1">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 1!</b>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <!-- Toast -->
  <div class="toast" id="toast-name-2">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 2!</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

CSS（无需修改，保持原样式） #

.toast-container {
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
}
[class*="toast-pos-"] {
  position: absolute;
  padding: 10px;
}
.toast-pos-top {
  top: 0;
}
.toast-pos-right {
  right: 0;
}
.toast-pos-bottom {
  bottom: 0;
}
.toast-pos-left {
  left: 0;
}
.toast {
  display: none;
  padding: 20px;
  margin: 20px 0;
  background: #eeeeee;
  color: #333333;
}
.close-toast {
  float: right;
  text-decoration: none;
  color: #ffffff;
  vertical-align: middle;
}
/* Aditional Styles */
body {
  padding: 60px 40px;
  background: #42A5F5;
  font-family: sans-serif;
}
.toast-trigger {
  color: #ffffff;  
}
.toast {
  background: rgba(255,255,255,.5);
  color: #FFFFFF;
}
.toast-trigger {
  display: inline-block;
  top: 50%;
  left: 50%;
  margin: 10px;
  padding: 20px 40px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
  transition: ease .2s;
}
.toast-trigger:hover {
  background: #ffffff;
  color: #009688;
}

JavaScript（核心修改） #

// 存储每个Toast的定时器，用于手动关闭时清除
const toastTimers = {};

$(".toast-trigger").click(function(e){
  e.preventDefault();
  const toastId = $(this).attr("data-toast");
  const $toast = $("#" + toastId);
  
  if (!$toast.is(":visible")) {
    $toast.fadeIn(300);
    // 设置自动关闭定时器，2秒后淡出
    toastTimers[toastId] = setTimeout(() => {
      $toast.fadeOut(300);
      delete toastTimers[toastId];
    }, 2000);
  }
});

$(".close-toast").click(function(e){
  e.preventDefault();
  const toastId = $(this).parent().attr("id");
  const $toast = $("#" + toastId);
  
  // 清除定时器，避免自动关闭触发
  if (toastTimers[toastId]) {
    clearTimeout(toastTimers[toastId]);
    delete toastTimers[toastId];
  }
  $toast.fadeOut(300);
});

内容的提问来源于stack exchange，提问作者Asma Binta Younus