Popup social flotante utilizando jQuery y CSS

Las redes sociales son muy importantes para todo proyecto web que se precie. Por un lado, será más fácil para ti conseguir más visitantes debido al tráfico que atraen, además de proporcionarte más presencia en los principales motores de búsqueda. Debido a esto, que una web cuente con perfiles en las redes sociales más populares se ha convertido en una necesidad.

Es muy habitual el entrar en un sitio web y ver los típicos botones de las redes sociales más famosas. Por lo general suelen ser: el like de Facebook, el seguir en Google+, el seguir de Twitter y el seguir de LinkedIn. En este tutorial veremos cómo crear un popup con los botones de las distintas redes sociales el cual sea flotante, es decir, que aunque hagamos scroll hacia arriba o hacia abajo, permanezca siempre visible. Para ello nos ayudaremos de jQuery y CSS.

Esto ayudará a los visitantes a encontrar los perfiles de tus redes sociales de tu sitio web mediante un simple clic.

Además de mostrar los botones de las redes sociales, puedes utilizar este script para mostrar cualquier cosa, como por ejemplo un formulario de suscripción por correo electrónico.

Código Javascript

Lo primero que tenemos que hacer es incluir la librería jQuery.

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

Utilizaremos la función $(window).scroll() para detectar el evento scroll. CloseSPopup() es una función personalizada de Javascript que gestionará el evento de cerrar el popup.

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

Código CSS

El siguiente CSS lo utilizaremos para dar estilo al 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;
}

Código HTML

Inserta este código HTML dentro del div “spopup”.

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

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP