Ventana emergente con redes sociales en HTML

kanikase dijo:

Es muy sencillo hacerlo, si sabes algo de html css y js, puedes hacerlo a tu gusto.
de todos modos aquí te dejo este enlace.

How To Make a Modal Box With CSS and JavaScript

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Hacer clic para expandir...

CaballeroDigital dijo:

No sabes de algún código que esté listo sólo de colocar las url de las redes sociales?

Hacer clic para expandir...

Stron dijo:

Amigo el link que te paso el compañero basta con que lo modifiques un poco para hacer lo que quieres... Aqui te dejo un ejemplo de como quedaría.

HTML:

<!-- Modal -->
<div id="myModal" class="modal">

  <div class="modal-content">
    <span class="close">&times;</span>
    <!-- Agregar dentro este div el contenido que quieras que salga en el modal ó los enlaces de tus redes sociales. -->
  </div>

</div>

<script>
/* Crear un SetTimeout de 3 segundos o de los segundos que quieras, y agregas un display blok para mostrar el modal oculto cuando pasen los segundos.
*/
setTimeout(function(){ modal.style.display = "block";}, 3000);

var modal = document.getElementById("myModal"),
    span = document.getElementsByClassName("close")[0];

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Si usas fontawesome puedes crear los enlaces con iconos de las redes sociales asi:

HTML:

<a target="_blank" id="shared_wsp" href="facebook.com" class="btn btn-success btn-circle btn-lg">
    <i class="fa fa-facebook-f"></i>
</a>

Hacer clic para expandir...