Ventana emergente con redes sociales en HTML

  • Autor Autor CaballeroDigital
  • Fecha de inicio Fecha de inicio
C

CaballeroDigital

Épsilon
Verificado por Whatsapp
Saludos compañeros. ¿Quién me puede sacar de este aprieto? Ando en busca de un código html que me solvente o tenga la siguiente función:

Quiero que al ingresar a la web, luego de unos 30 segundos aparezca esa ventana emergente con los botones de las redes sociales para seguir: Instagram, Facebook, Twitter y canal de Telegram. Que contenga la opción obviamente de cerrar la ventana.
 
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.

 
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.

No sabes de algún código que esté listo sólo de colocar las url de las redes sociales?
 
No sabes de algún código que esté listo sólo de colocar las url de las redes sociales?
Creo que es difícil entcontrar exactamente lo que buscas, busca en Google "modal js" y ve si hay alguno que te sirva.
 
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>
 
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>
Oye, necesito lo mismo para el formulario de suscripción de blogger y una imagen como esta
 

Adjuntos

  • 119049561_1826749237466970_1761737762419114428_o.webp
    119049561_1826749237466970_1761737762419114428_o.webp
    46,3 KB · Visitas: 19
Atrás
Arriba