WHMCS Logam 框架实现淡入淡出 Alert 弹窗

以下是一个使用 WHMCS Logam 框架实现淡入淡出的 alert 弹窗的示例代码：

首先，确保您已将 WHMCS Logam 框架正确地引入到您的项目中。
在页面中添加一个用于显示 alert 的容器，例如：

<div id='alert-container' class='alert-container'></div>

在页面底部的<script></script>标签中，添加以下代码：

// 定义一个函数来显示 alert 弹窗
function showAlert(message, type) {
  // 创建一个 alert 元素
  var alertElement = document.createElement('div');
  
  // 设置 alert 的样式和内容
  alertElement.className = 'alert alert-' + type;
  alertElement.innerHTML = message;
  
  // 将 alert 元素添加到容器中
  document.getElementById('alert-container').appendChild(alertElement);
  
  // 设置 alert 的淡入效果
  setTimeout(function() {
    alertElement.style.opacity = 1;
  }, 100);
  
  // 设置 alert 的淡出效果
  setTimeout(function() {
    alertElement.style.opacity = 0;
    setTimeout(function() {
      // 移除 alert 元素
      alertElement.parentNode.removeChild(alertElement);
    }, 600);
  }, 3000); // 在 3 秒后淡出 alert
}

// 在页面加载完毕后调用 showAlert 函数来显示 alert 弹窗
window.onload = function() {
  showAlert('这是一个成功的消息', 'success');
};

在您的 CSS 文件中添加以下样式代码：

.alert-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.alert {
  opacity: 0;
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  transition: opacity 0.6s ease-in-out;
}

.alert-success {
  background-color: #dff0d8;
  color: #3c763d;
}

/* 可以根据需要添加其他类型的 alert 样式，例如 .error, .warning 等 */

通过以上步骤，您应该能够在页面加载完成后看到一个淡入淡出的 alert 弹窗。您可以根据需要调整样式和显示时间。