html5侧边提示框

qq_582943452025-07-17 17:17

javascript 复制代码

// 显示通知消息
function showNotification(message, type = 'info') {
	// 创建通知元素
	const notification = document.createElement('div');
	notification.className = `notification notification-${type}`;
	notification.innerHTML = `
        <i class="fas fa-${getNotificationIcon(type)}"></i>
        <span>${message}</span>
    `;

	// 添加样式
	notification.style.cssText = `
        position: fixed;
        top: 90px;
        right: 20px;
        background: ${getNotificationColor(type)};
        color: white;
        padding: 12px 16px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 3000;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        max-width: 300px;
        animation: slideInRight 0.3s ease;
        transform: translateX(100%);
    `;

	document.body.appendChild(notification);

	// 显示动画
	setTimeout(() => {
		notification.style.transform = 'translateX(0)';
	}, 10);

	// 自动移除
	setTimeout(() => {
		notification.style.transform = 'translateX(100%)';
		setTimeout(() => {
			if (notification.parentNode) {
				notification.parentNode.removeChild(notification);
			}
		}, 300);
	}, 3000);
}

// 获取通知图标
function getNotificationIcon(type) {
	const icons = {
		success: 'check-circle',
		error: 'exclamation-circle',
		warning: 'exclamation-triangle',
		info: 'info-circle'
	};
	return icons[type] || 'info-circle';
}

// 获取通知颜色
function getNotificationColor(type) {
	const colors = {
		success: '#4CAF50',
		error: '#F44336',
		warning: '#FF9800',
		info: '#2196F3'
	};
	return colors[type] || '#2196F3';
}

以上是提示框的核心代码

提示框的使用如下：

javascript 复制代码

showNotification("数据提交成功！", "success");

showNotification(`数据提交失败!`, "error");

showNotification(`数据提交错误!`, "warning");

以下是警告提示框的效果：