Social popup on page scroll using jQuery and CSS

 


The popularity of social media is on the rise, as it makes it easier to reach visitors and to appear on search engine results. With this increase in popularity, any website needs to maintain a strong presence. 

You can also boost your fan following through social media likes, which is the easiest way to increase your website traffic.
Social buttons are now part of every web project. Following Facebook, Google+, Tweeting, and LinkedIn are some of the most popular social buttons. Here, we will discuss how you can display social buttons in a jQuery popup on page scroll by opening a jQuery dialog box.

The pop-up appears when visitors scroll down your website homepage. The pop-up displays like and follow buttons for your social media pages. You can promote your social pages so visitors can find them and like them.

We implemented the whole system using jQuery, CSS, and HTML. The social buttons popup can easily be embedded on any web page. At this popup, you can also display a subscribe form or whatever else you want.

JavaScript 

At first we need to include jQuery library file.

<script src="//http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

$(window).scroll() function is used to detect the scroll event. closeSPopup() is custom JavaScript function which is handle the popup close event.

$(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/5)
        $("#spopup").show("slow");else $("#spopup").hide("slow");
});
function closeSPopup(){
    $('#spopup').hide('slow');
}

CSS 

Following CSS codes are used for popup.

#spopup{
    background:#f3f3f3;
    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    -moz-box-shadow:inset 0 0 3px #333;
    -webkit-box-shadow:inset 0 0 3px #333;
    box-shadow:inner 0 0 3px #333;
    padding:12px 14px 12px 14px;
    width:300px;
    position:fixed;
    bottom:13px;
    right:2px;
    display:none;
    z-index:90;
}

HTML

Insert the popup content into “spopup” div.

<div id="spopup" style="display: none;">
    <!--close button-->
    <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeSPopup();">
        <img src="ico-x.png" width="18" height="18"/>
    </a>
    <!--insert popup content here-->
</div>

If you have any query about this tutorial, feel free to post your comments at the below comment form.

*

Post a Comment (0)
Previous Post Next Post