OBJUI

弹窗功能，是每个后台管理系统和有交互的前端页面，必不可少的的功能。市面上这个功能有很多，但大部分都是一整体框架的，比较臃肿。所以就用原生JS自己写一个。

function message(message, type='info') {  
  // Toast容器的默认样式，参考Bootstrap Alert样式  
  const toastStyle = {  
    position: 'fixed',  
    top: '0', // 初始位置在屏幕顶部之上  
    left: '50%',  
    transform: 'translateX(-50%)',  
    zIndex: 9999,  
    padding: '3px 5px',  
    borderRadius: '4px',  
    boxShadow: '0 0.25rem 0.75rem rgba(0, 0, 0, 0.1)',  
    display: 'block',  
    opacity: '0',  
    transition: 'opacity 0.15s linear, transform 0.15s ease-in-out',  
    backgroundColor: '#fff',  
    border: '1px solid transparent',  
    maxWidth: '350px'  
  };  
  
  // 根据类型设置不同的背景色和边框色  
  const toastTypes = {  
    success: { backgroundColor: '#d4edda', borderColor: '#c3e6cb', textColor: '#155724' },  
    error: { backgroundColor: '#f8d7da', borderColor: '#f5c6cb', textColor: '#721c24' },  
    info: { backgroundColor: '#d1ecf1', borderColor: '#bee5eb', textColor: '#0c5460' },  
    warning: { backgroundColor: '#fff3cd', borderColor: '#ffeeba', textColor: '#856404' }  
  };  
  
  // 创建Toast容器元素  
  const toastContainer = document.createElement('div');  
  toastContainer.className = 'toast'; // 添加一个通用的类名以便CSS样式应用  
  Object.keys(toastStyle).forEach(key => {  
    toastContainer.style[key] = toastStyle[key];  
  });

  if (toastTypes[type]) {  
    Object.keys(toastTypes[type]).forEach(key => {  
      if (key === 'backgroundColor' || key === 'borderColor' || key === 'textColor') {  
        // 对于背景色、边框色和文本色，我们直接应用它们  
        toastContainer.style[key] = toastTypes[type][key];  
      } else if (key === 'zIndex') {  
        // 注意：在toastTypes中通常不包含zIndex，但这里只是为了演示  
        toastContainer.style.zIndex = toastTypes[type][key];  
      }  
    });  
  }  
  
  // 创建Toast内容元素  
  const toastContent = document.createElement('div');  
  toastContent.className = 'toast-body'; // 添加内容区域的类名  
  toastContent.style.color = toastTypes[type] ? toastTypes[type].textColor : 'inherit'; // 设置文本颜色  
  toastContent.textContent = message;  
  
  // 将内容添加到Toast容器中  
  toastContainer.appendChild(toastContent);  
  
  // 获取Toast容器元素（可能之前已经存在）  
  const existingToast = document.querySelector('.toast');  
  if (existingToast) {  
    existingToast.remove(); // 如果存在，先移除  
  }  
  
  // 将Toast容器添加到body中  
  document.body.appendChild(toastContainer);  
  
  // 显示Toast（从上往下淡入）  
  toastContainer.style.opacity = '1';  
  toastContainer.style.transform = 'translateY(20px)';  
  
  // 设置Toast的自动隐藏（淡出后移除）  
  setTimeout(function() {  
    toastContainer.style.opacity = '0';  
    toastContainer.style.transform = 'translateY(-50px)';  
    setTimeout(function() {  
      toastContainer.remove(); // 当淡出和移出完成后，从DOM中移除Toast  
    }, 300); // 淡出动画时长  
  }, 3000); // Toast显示3秒后自动隐藏  
}  


//使用示例
message('操作成功','success');
message('操作失败','error');