Facebook Style Notification Popup using CSS and Jquery

    Rating: ★★★★☆
    View: 216
    Download: 187
    Từ khóa:

    This is the most needed feature for social networking web projects to minimize and enrich the UX elements. Just few lines of code implement these concepts in your next project, take a quick look at this live demo.

    HTML markup
    Create an unordered HTML list for menu design.

    CSS markup

    Add float:left for horizontal view.
    #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}

    HTML markup
    Notifications popup is divided into three parts are Notification Title, Notification Body and Notification Footer

  • 3 Notifications
    Notifications
  • CSS markup
    Take a look at the following highlighted CSS properties.

    #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;
    }
    
    Notification Count Bubble
    Circle bubble for Notification count.
    #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 markup

    Contains javascipt code. $("#notificationLink").click(function(){}- notificationContainer is the ID name of the popup div. Using jquery fadeToggel() showing popup based on click actions.
    
    

     

    loading Đang tải...

    template được ưa chuộng