Facebook Notification Popup

Submitted by alpha_luna on Thursday, June 23, 2016 - 17:02.
If you are looking for Facebook Notification Popup using CSS and jQuery then you are at the right place. Are you looking for Facebook UI features, this simple article will help you to create Facebook-style notifications popup using CSS, HTML, and jQuery. The user will understand how CSS elements important to improve a web design. If you have any social networking web projects, you can use this simple article to apply it in your own project.

HTML Source Code

Creating unordered HTML list for our menu design.
  1. <ul id="nav">
  2. <li><a href="#">Link</a></li>
  3. <li><a href="#">Link</a></li>
  4. <li id="notification_li">
  5. <span id="notification_Count">3</span>
  6. <a href="#" id="notification_Link">Notifications</a>
  7. <div id="notification_Wrapper">
  8. <div id="notificationTitle">Notifications</div>
  9. <div id="notificationsBody" class="notifications">
  10. </div>
  11. <div id="notificationFooter"><a href="#">See All</a></div>
  12. </div>
  13. </li>
  14. <li><a href="#">Link</a></li>
  15. </ul>
Result

CSS Code

This CSS source code for the notification popup.
  1. #notification_Count {
  2.         padding: 3px 7px 3px 7px;
  3.         background: red;
  4.         color: #ffffff;
  5.         font-weight: bold;
  6.         margin-left: 102px;
  7.         border-radius: 9px;
  8.         position: absolute;
  9.         margin-top: -16px;
  10.         font-size: 11px;
  11. }

jQuery Code

It contains the JavaScript source code and the ID name of the popup DIV.
  1. <script type="text/javascript" >
  2. $(document).ready(function()
  3. {
  4. $("#notification_Link").click(function()
  5. {
  6. $("#notification_Wrapper").fadeToggle(300);
  7. $("#notification_Count").fadeOut("slow");
  8. return false;
  9. });
  10.  
  11. //Document Click
  12. $(document).click(function()
  13. {
  14. $("#notification_Wrapper").hide();
  15. });
  16. //Popup Click
  17. $("#notification_Wrapper").click(function()
  18. {
  19. return false
  20. });
  21.  
  22. });
  23. </script>

Result

Result Kindly click the "Download Code" button below for full source code. Thank you very much. Hope that this tutorial will help you a lot. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
facebook
popup
jQuery
css
HTML

Add new comment

About text formats
  • 168 views