Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Share code Tạo thông báo dạng Popup giống với Facebook
Share code Tạo thông báo dạng Popup giống với Facebook
Nguyễn Trung Hiếu
Share Code Web Company 2014

Share code Tạo thông báo dạng Popup giống với Facebook

Bài viết này sẽ hướng dẫn cho bạn làm thế nào để tạo ra một thông báo dạng Popup giống với Facebook sử dụng Jquery, HTML và CSS. Đây là tính năng cần thiết nhất cho các dự án web mạng xã hội nếu như các bạn muốn tăng tính tương tác với người dùng

facebook notification popup with css

Thiết kế Menu HTML

Đầu tiên chúng ta thiết kế một menu đơn giản như đoạn code dưới đây:

Menu trên chỉ bao gồm 1 thẻ ul và 5 thẻ li bên trong. Chú ý thẻ li thứ 4 có id=notification_li để ta css riêng và thêm nội dung cho nó.
Sau đó add CSS này vào. Đoạn CSS này chỉ là định dạng chung cho menu của chúng ta mà thôi.

Với 2 đoạn code trên, chúng ta sẽ được như sau:
facebook links

Thiết kế Notification

Chúng ta sẽ thiết kế HTML của phần thông báo thành 3 phần Tiêu đề, phần thân và phần footer. Mình có up hình vẽ khung bên dưới để các bạn dễ hình dung:
popup like facebook
Tiếp theo là điền thêm thông tin vào nội dung của Popup sẽ xuất hiện. Ở đây ta thêm một thẻ span để hiển thị số thông báo. Thêm các thẻ div để hiển thị nội dung gồm các thẻ lần lượt có id là notificationTitle, notificationsBody notificationFooter

Và thêm đoạn css sau, trong đó có thuộc tính -webkit-box-shadow để đổ bóng cho Popup. Đoạn #notificationContainer:before có sử dụng pseudo-element để tạo mũi tên.

Và thêm đoạn CSS cho nút hiển thị số thông báo. Trong đó thuộc tính border-radius để bo hình tròn.

Jquery làm nốt việc còn lại

Cuối cùng chúng ta sẽ sử dụng jquery để nó làm nốt việc còn lại là ẩn hiện các thành phần khi chúng ta click vào xem. Sự kiện bắt thao tác click chuột sẽ lấy hiệu ứng fadeToggle fadeOut

Download Code

Vậy là xong rồi đấy. Hy vọng với khung HTML đơn giản bên trên, sẽ giúp ích cho các bạn trong những dự án thiết kế website thêm đẹp hơn nhé. Chúc các bạn thành công!


Loạt bài viết về Facebook style

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 6.002 hits
%d bloggers like this: