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…

Ðối với việc phong cách thiết kế một thông tin bạn cần chăm sóc đến sắc tố cũng như nội dung mà mình muốn truyền đạt. Như so với thông tin cảnh báo nhắc nhở thì bạn nên sử dụng màu đỏ để ý niệm rằng dây là một hành vi nguy hại hoàn toàn có thể tác động ảnh hưởng tới người dùng hay một hành vi cần triển khai 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 bảo vệ người dùng hoàn toàn có thể hiểu được một cách thuận tiện .Sau khi hiểu sơ lược về thông tin thì sau đây mình sẽ ra mắt một số ít Alert snippet giúp bạn có sự lựa chọn tốt nhất để tương thích với mục tiêu cũng như phong cách thiết kế, bố cục tổng quan website 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.

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 tin này nhé :See the Pen Modern Alerts by MohammadReza keikavousi ( @ keikaavousi ) on CodePen .Nguồn

Thiết Kế Alert CSS:

Đây là đoạn code và khi hiển thị trên web của component thông tin 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:

Đây là đoạn code và khi hiển thị trên web của component thông tin này nhé :See the Pen UI – Material Design alerts by Renan Pupin ( @ renanpupin ) on CodePen .Nguồn

Thiết Kế Javascript Alerts:

Đây là đoạn code và khi hiển thị trên web của component thông tin này nhé :See the Pen Alerts Component by Travis John ( @ travis_john ) on CodePen .Nguồn

Thiết Kế Javascript Alert Box:

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

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

Nguồn

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 tin này nhé :See the Pen Pop-Up Overlay by Aaron Taylor ( @ BeanBaag ) on CodePen .Nguồn

Cách Tạo Alert Bootstrap:

Đây là đoạn code và khi hiển thị trên web của component thông tin này nhé :See the Pen Bootstrap Alert Tests by Henrijs Kons ( @ LAUVz ) on CodePen .Nguồn

Thiết Kế Alert CSS Component:

Đây là đoạn code và khi hiển thị trên web của component thông tin 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 :

Đây là đoạn code và khi hiển thị trên web của component thông tin 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:

Đây là đoạn code và khi hiển thị trên web của component thông tin này nhé :See the Pen Simple css alerts by Stanislav ( @ golcinho ) on CodePen .Nguồn

Thiết Kế Alert UI CSS:

Đây là đoạn code và khi hiển thị trên web của component thông tin 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 hạn trong việc chọn phong cách thiết kế component thông tin cho website và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !

Source: https://vinatrade.vn
Category : Kiến thức cơ bản