Tạo hộp thoại thông báo thông minh với CSS và JS

1. Cấu Trúc HTML Cốt Lõi

<div class="info">

Đây là hộp thông tin, dùng để hướng dẫn hoặc ghi chú thêm cho độc giả.

<span class="close-btn">&times;</span>

</div>

<div class="success"> Thành công! Bạn đã lưu cài đặt giao diện mới nhất. <span class="close-btn">&times;</span> </div> <div class="warning"> Cảnh báo: Hãy sao lưu template gốc trước khi chỉnh sửa mã HTML. <span class="close-btn">&times;</span> </div> <div class="error"> Lỗi 404: Không thể kết nối đến máy chủ hình ảnh. <span class="close-btn">&times;</span> </div>

2. Mã CSS Định Dạng Và Biểu Tượng SVG

/* Định dạng khung hộp thông báo */

.info, .success, .warning, .error {

position: relative;

padding: 16px 40px 16px 56px;

margin: 15px 0;

border-radius: 8px;

font-size: 15px;

line-height: 1.6;

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

border: 1px solid transparent;

border-left-width: 6px;

transition: opacity 0.3s ease, transform 0.3s ease;}

.info:hover, .success:hover, .warning:hover, .error:hover {

transform: translateY(-2px);}

/* Định dạng Icon SVG chung */ .info::before, .success::before, .warning::before, .error::before { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; } /* Màu sắc và Icon từng loại */ .info { background-color: #eff6ff; border-color: #dbeafe; border-left-color: #3b82f6; color: #1e3a8a; } .info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E"); } .success { background-color: #f0fdf4; border-color: #dcfce3; border-left-color: #22c55e; color: #14532d; } .success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E"); } .warning { background-color: #fffbeb; border-color: #fef3c7; border-left-color: #f59e0b; color: #78350f; } .warning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f59e0b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E"); } .error { background-color: #fef2f2; border-color: #fee2e2; border-left-color: #ef4444; color: #7f1d1d; } .error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E"); }

3. Mã CSS Hiệu Ứng Và Nút Đóng (Close Button)

/* Hiệu ứng Rung lắc (Error) */

@keyframes shakeError {

0%, 100% { transform: translateX(0); }

10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }

20%, 40%, 60%, 80% { transform: translateX(5px); }

}

.error { animation: shakeError 0.6s cubic-bezier(.36, .07, .19, .97) 0.2s both; }

/* Hiệu ứng Nhấp nháy viền (Warning) */ @keyframes pulseWarning { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } } .warning { animation: pulseWarning 2s infinite; } /* Định dạng nút X (Đóng) */ .close-btn { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 22px; line-height: 1; font-weight: bold; opacity: 0.5; cursor: pointer; transition: opacity 0.2s ease; user-select: none; } .close-btn:hover { opacity: 1; color: #000; }

4. Mã JavaScript Xử Lý Đóng Thông Báo

<script>

document.addEventListener('DOMContentLoaded', function() {

const closeBtns = document.querySelectorAll('.close-btn');

closeBtns.forEach(function(btn) {

btn.addEventListener('click', function() {

const alertBox = this.parentElement;

alertBox.style.opacity = '0';

setTimeout(function() { alertBox.remove(); }, 300);

});

});

});

</script>