Alert Là Gì Và 12 Ví Dụ Thông Báo Trong Website

Hôm nay chúng ta sẽ đi tìm hiểu cách thiết kế component alert bằng cách kết hợp HTML, CSS, Javascript và Bootstrap nhé.

Tóm Tắt

Alert Là Gì?

Khi bạn cần thu hút sự chú ý của người dùng đến một hành động hay sự kiện nào đó trên trang web của chúng ta thì bạn có thể sử dụng component alert(thông báo). Nhưng cũng không nên quá lạm dụng vì nó sẽ gây sự khó chịu cho người dùng và lần sau họ có thể không quay lại trang của bạn nữa. Có thể bạn sử dụng trong những hoạt động sau:

Thông báo kết quả về một hành động hay sự kiện. Ví dụ như người dùng đăng ký thành viên thì chúng ta nên sử dụng alert để thông báo cho người dùng biết là đã đăng ký thành công hoặc xảy ra lỗi.
Cảnh bảo từ hệ thống trang web để cung cấp thông tin cho người dùng như là sắp có bảo trì hệ thống, một chức năng sắp ra mắt…
Xác nhận hành động rủi ro nào đó trên trang web. Ví dụ khi bạn vào một trang web không an toàn thì Google sẽ đưa ra cảnh báo cho bạn và sẽ có hai sự lựa chọn là đi tiếp hoặc không truy cập vào trang web đó nữa.
Giúp bạn tăng khả năng liên kết với các khách hàng tiềm năng bằng những mẫu thông báo đăng ký email để nhận sản phẩm mới, bài viết mới…

Ðối với việc thiết kế một thông báo bạn cần quan tâm đến màu sắc cũng như nội dung mà mình muốn truyền đạt. Như đối với thông báo cảnh báo thì bạn nên sử dụng màu đỏ để ngụ ý rằng dây là một hành động nguy hiểm có thể ảnh hưởng tới người dùng hay một hành động cần thực hiện ngay lập tức. Về phần nội dung thì cần câu văn rõ ràng ngắn gọn đảm bảo người dùng có thể hiểu được một cách dễ dàng.

Sau khi hiểu sơ lược về thông báo thì sau đây mình sẽ giới thiệu một số Alert snippet giúp bạn có sự lựa chọn tốt nhất để phù hợp với mục đích cũng như thiết kế, bố cục trang web của bạn.

Trong phần này chúng ta sẽ đi vào tìm hiểu các ví dụ về alert bằng HTML, CSS và Javascript nhé! Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.