Social media is growing in popularity, making visitors easier to reach and making your search engine presence felt. This development now makes a strong presence for any website a necessity. The best way to increase the number of visitors to the website is online, which can also earn a lot of fans.

Every web project now has social buttons. Facebook Like, Google+ Follow, Tweet Follow, and LinkedIn Follow are the popular social buttons. We'll discuss how to open a jQuery dialog window on page scroll in this tutorial and display the social buttons in this popup. A pop-up would appear when the visitors visit your website homepage and scroll down the page. Social pages such as or following buttons on the website will be shown in this popup. It will help visitors find the social pages of your website as well as the pages.

JQuery, CSS, and HTML were used to implement the entire system. This social buttons can be easily integrated into your web project. You can also display in this popup the email subscription form or anything. You can access the live demo from the "Demo" link above if you want to view the live demo. You can access the script from the "Access" link above if you want to download it.

JavaScript Code:

Initially we need to include the library directory jQuery.

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

The function $(window).scroll() detects the scroll case. CloseSPopup() is a custom JavaScript function that handles the closing pop-up event.

$(window).scroll(function(){

    if($(document).scrollTop()>=$(document).height()/5)

        $("#spopup").show("slow");else $("#spopup").hide("slow");

});

function closeSPopup(){

    $('#spopup').hide('slow');

}

CSS Code:

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 Code:

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>