jQuery通知提示

用jQuery创建可自动消失的通知提示条，用于成功、错误或信息反馈。 · 难度：入门 · +15XP

jQuery通知提示

通知提示（Notification Toast）是一种非侵入式的消息提示，通常出现在屏幕角落，几秒后自动消失。jQuery可以轻松创建、显示和移除这些提示元素。

实现思路

• 动态创建<div>元素，添加样式类（如.success, .error）。
• 使用.fadeIn()或.slideDown()显示。
• 设置定时器（setTimeout），几秒后调用.fadeOut()并移除。

代码示例

function showNotification(message, type) {
  var notification = $('
' + message + '
');
  $('body').append(notification);
  notification.fadeIn(300);
  setTimeout(function() {
    notification.fadeOut(300, function() {
      $(this).remove();
    });
  }, 3000);
}
// 使用
showNotification('操作成功！', 'success');
showNotification('出错了！', 'error');

样式示例

练习提示

在右侧编辑器中，已经定义了showNotification函数，但缺少点击关闭按钮的功能。请为通知添加一个关闭按钮（×），点击后立即隐藏并移除通知。