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

Xem: 1931    Tải: 52   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

9 điểm   ( 6 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]tao-thong-bao-dang-popup-giong-voi.zip (33.62 KB)
Phí tải ~ 2,000 đ

Bạn cần phải Đăng nhập để tải file [megacode]tao-thong-bao-dang-popup-giong-voi.zip
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

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, và chính nhờ các thành phần của CSS sẽ giúp cải thiện thiết kế web tốt hơn. Đâ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

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

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, và chính nhờ các thành phần của CSS sẽ giúp cải thiện thiết kế web tốt hơn. Đâ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:

<ul id="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li id="notification_li">
<a href="#" id="notificationLink">Notifications</a>
// Notification Popup Code...
</li>
<li><a href="#">Link4</a></li>
</ul>
Sau đó add CSS này vào:
#nav{list-style:none;margin: 0px;padding: 0px;}
#nav li {
float: left;
margin-right: 20px;
font-size: 14px;
font-weight:bold;
}
#nav li a{color:#333333;text-decoration:none}
#nav li a:hover{color:#006699;text-decoration:none}

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 như hình vẽ khung bên dưới để các bạn dễ hình dung:

<li id="notification_li">
<span id="notification_count">3</span>
<a href="#" id="notificationLink">Notifications</a>
 
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications"></div>
<div id="notificationFooter"><a href="#">See All</a></div>
</div>
 
</li>
Và thêm đoạn css sau:
#notification_li
{
position:relative
}
#notificationContainer
{
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 30px;
margin-left: -170px;
width: 400px;
z-index: -1;
display: none; // Enable this after jquery implementation
}
// Popup Arrow
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle
{
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
position: fixed;
z-index: 1000;
width: 384px;
border-bottom: 1px solid #dddddd;
}
#notificationsBody
{
padding: 33px 0px 0px 0px !important;
min-height:300px;
}
#notificationFooter
{
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}
Và thêm đoạn CSS cho nút hiển thị số thông báo:
#notification_count
{
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 77px;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}

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:

<script type="text/javascript" src="js/jquery.min.1.9.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#notificationLink").click(function()
{
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
return false;
});
 
//Document Click hiding the popup
$(document).click(function()
{
$("#notificationContainer").hide();
});
 
//Popup on click
$("#notificationContainer").click(function()
{
return false;
});
 
});

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!

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

Tạo thông báo dạng Popup giống với Facebook Đăng ngày 23-09-2014  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, và chính nhờ các thành phần của CSS sẽ giúp cải thiện thiết kế web tốt hơn. Đâ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 1.5/10 1931

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn