Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Alert Là Gì Và 12 Ví Dụ Thông Báo Trong Website

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


Ngày 21 Tháng 4 Năm 2020

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é.

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…
Ví dụ về component Alert

Ðố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.

Các Ví Dụ Alert Trong Trang Web

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.

Cách Tạo Jquery Alert Popup:

Cách Tạo Jquery Alert Popup

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen Modern Alerts by MohammadReza keikavousi (@keikaavousi) on CodePen.

Nguồn

Thiết Kế Alert CSS:

Thiết Kế Alert CSS

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen Daily UI#011 | Flash Message (Error/Success) by Julie Park (@juliepark) on CodePen.

Nguồn

Thiết Kế Alert Kiểu Material:

Thiết Kế Alert Kiểu Material

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen UI -Material Design alerts by Renan Pupin (@renanpupin) on CodePen.

Nguồn

Thiết Kế Javascript Alerts:

Thiết Kế Javascript Alerts

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen Alerts Component by Travis John (@travis_john) on CodePen.

Nguồn

Thiết Kế Javascript Alert Box:

Thiết Kế Javascript Alert Box

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen Notifications by Keith Pickering (@keithpickering) on CodePen.

Nguồn

Cách Tạo Alert CSS Javascript:

Xây Dựng component thông báo bằng HTML, CSS, JS Phần 8

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen Animated Notification Messages by Jed Trow (@jedtrow) on CodePen.

Nguồn

Hiển Thị Thông Báo Bằng Javascript:

Hiển Thị Thông Báo Bằng Javascript

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen Pop-Up Overlay by Aaron Taylor (@BeanBaag) on CodePen.

Nguồn

Cách Tạo Alert Bootstrap:

Cách Tạo Alert Bootstrap

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen Bootstrap Alert Tests by Henrijs Kons (@LAUVz) on CodePen.

Nguồn

Thiết Kế Alert CSS Component:

Thiết Kế Alert CSS Component

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen #011 Flash Message by Andre Wichert (@andrewichert) on CodePen.

Nguồn

Tạo Alert CSS Kết Hợp Với SVG :

Tạo Alert CSS Kết Hợp Với SVG

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen Flash Messages - 100 Accessible UI Challenge by Maxwell Antonucci (@max1128) on CodePen.

Nguồn

Cách Tạo 3D Alert Shadow CSS:

Cách Tạo 3D Alert Shadow CSS

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen Simple css alerts by Stanislav (@golcinho) on CodePen.

Nguồn

Thiết Kế Alert UI CSS:

Thiết Kế Alert UI CSS

Đây là đoạn code và khi hiển thị trên web của component thông báo này nhé:

See the Pen UI Alert CSS by Nirajan Basnet (@nirazanbasnet) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc chọn thiết kế component thông báo cho trang web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!