<!doctype html>
Pop-up Promocional
<style>
/* Estilos generales */
body.popup-active {
overflow: hidden;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: none;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 30px;
width: 90%;
max-width: 550px;
border-radius: 15px;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.7);
z-index: 10000;
display: none;
text-align: center;
animation: slideDown 0.5s ease-out;
}
.popup.show {
display: block;
}
@keyframes slideDown {
from {
transform: translate(-50%, -60%);
opacity: 0;
}
to {
transform: translate(-50%, -50%);
opacity: 1;
}
}
/* Estilos del botón de cierre */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #ff5252;
color: white;
font-size: 20px;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
display: none;
transition: background-color 0.3s ease;
}
.close-btn:hover {
background-color: #ff1744;
}
/* Estilos del contenido del pop-up */
.popup-title {
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
animation: colorChange 3s infinite alternate;
}
@keyframes colorChange {
0% { color: #333; }
100% { color: #007bff; }
}
.popup img {
width: 100%;
border-radius: 12px;
margin-bottom: 20px;
transition: transform 0.3s;
}
.popup img:hover {
transform: scale(1.05);
}
.popup p {
font-size: 18px;
color: #555;
margin-bottom: 20px;
line-height: 1.6;
}
/* Estilos para los botones */
.btn-container {
display: flex;
justify-content: space-between;
gap: 10px;
}
.btn {
padding: 12px 25px;
color: white !important;
text-decoration: none;
border-radius: 8px;
font-size: 18px;
transition: background-color 0.3s ease, transform 0.3s, box-shadow 0.3s;
display: inline-block;
width: 100%;
max-width: 150px;
text-align: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
/* Cambios de colores claros */
.btn-1 {
background-color: #FFA726;
color: white;
}
.btn-1:hover {
background-color: #FFB74D;
color: white;
}
.btn-2 {
background-color: #66BB6A;
color: white;
}
.btn-2:hover {
background-color: #81C784;
color: white;
}
.btn-3 {
background-color: #BDBDBD;
color: white;
}
.btn-3:hover {
background-color: #E0E0E0;
color: white;
}
/* Estilo del contador */
#counter {
font-size: 16px;
color: #555;
margin-top: 10px;
}
/* Estilo responsivo para pantallas más pequeñas */
@media (max-width: 600px) {
.popup-title {
font-size: 24px;
}
.btn {
font-size: 16px;
padding: 10px 15px;
}
}
</style>
<!-- Fondo oscuro -->
<div class="overlay" id="overlay"></div>
<!-- Pop-up emergente -->
<div class="popup" id="popup">
<button class="close-btn" id="close-btn" onclick="closePopup()">×</button>
<div class="popup-title" id="popup-title">¡Ofertas Exclusivas para Ti!</div>
<img src="" alt="Imagen Promocional" id="popup-image" />
<p id="popup-text">Descubre nuestras promociones especiales en formación y seguridad. ¡Da el siguiente paso hacia tu futuro con los mejores precios!</p>
<div class="btn-container">
<a href="tel:+34601510452" class="btn btn-1" id="call-btn">📞 Llamar</a>
<a href="https://wa.me/601510452" class="btn btn-2" id="whatsapp-btn">💬 WhatsApp</a>
<a href="https://cursos.seguridadyempleo.com" class="btn btn-3" id="web-btn">🌐 Web</a>
</div>
<div id="counter">El botón de cerrar aparecerá en <span id="counter-value">5</span> segundos</div>
</div>
<script>
let countdownValue = 5;
let countdownInterval;
// Mostrar el pop-up después de 10 segundos
setTimeout(() => {
document.body.classList.add("popup-active");
document.getElementById("overlay").style.display = "block";
document.getElementById("popup").classList.add("show");
// Iniciar el contador de 5 segundos
countdownInterval = setInterval(() => {
countdownValue--;
document.getElementById("counter-value").textContent = countdownValue;
if (countdownValue === 0) {
clearInterval(countdownInterval);
document.getElementById("close-btn").style.display = "block"; // Mostrar el botón de cerrar
document.getElementById("counter").style.display = "none"; // Ocultar el contador
}
}, 1000);
}, 10000);
// Función para cerrar el pop-up
function closePopup() {
document.body.classList.remove("popup-active");
document.getElementById("popup").classList.remove("show");
document.getElementById("overlay").style.display = "none";
}
// Cargar contenido aleatorio
const popups = [
{
url: 'https://i.postimg.cc/1XYTxS7Q/post-facebook-emprendedora-taller-aesthetic-rosa.png',
title: '💼 ¡Conviértete en Detective Privado!',
text: 'Inscríbete en nuestro curso superior de Detective Privado y accede a una carrera llena de oportunidades. Descuento por tiempo limitado.',
phone: 'tel:+34601510452',
whatsapp: 'https://wa.pe/iniseg',
web: 'https://cursos.seguridadyempleo.com'
},
{
url: 'https://i.postimg.cc/MZr1QHhD/51c19bd9-db18-43d5-8799-61ccb27f6a4a.png',
title: '📊 Curso Director de Seguridad',
text: 'Conviértete en Director de Seguridad por solo 80 Euros al mes. ¡No dejes pasar esta oportunidad!',
phone: 'tel:+34601510452',
whatsapp: 'https://wa.pe/iniseg',
web: 'https://cursos.seguridadyempleo.com'
},
{
url: 'https://i.postimg.cc/4yhytf9L/Copia-de-AHORRADORESESPA-A-COM-Fondo-virtual-para-Zoom.png',
title: '💡 ¡Ahorra en Seguridad!',
text: 'Te ayudamos a conseguir los mejores precios en seguridad sin compromisos. ¡Contáctanos para más información!',
phone: 'tel:+34601510452',
whatsapp: 'https://wa.me/34601510452',
web: 'https://promociones.seguridadyempleo.com'
},
{
url: 'https://i.postimg.cc/52qjvMfb/photo-2024-10-03-11-30-23.jpg',
title: '🚨 Curso Universitario de Especialista en Soporte Vital Básico',
text: '100% online. Aprende a salvar vidas con nuestro curso sobre Soporte Vital Básico y Uso del Desfibrilador.',
phone: 'tel:+34601510452',
whatsapp: 'https://wa.me/34601510452',
web: 'https://cursos.seguridadyempleo.com'
},
{
url: 'https://i.postimg.cc/wMgvTt5z/Screenshot-2024-09-26-18-51-07-977-com-android-chrome-edit.jpg',
title: '📚 Obtén tu Titulación INISEG',
text: 'Formación online con matrícula abierta. Curso de 3 meses para impulsar tu carrera en el sector de la seguridad privada.',
phone: 'tel:+34601510456',
whatsapp: 'https://wa.pe/iniseg',
web: 'https://cursos.seguridadyempleo.com'
},
{
url: 'https://seguridadyempresa.com/wp-content/uploads/2023/10/IMG_20231012_184745_105.jpg',
title: '👮 Curso Especializado en Intervención Policial',
text: 'Curso universitario acreditado. ¡Obtén 10 créditos ECTS con esta formación de 250 horas!',
phone: 'tel:+34601510452',
whatsapp: 'https://wa.me/34601510452',
web: 'https://cursos.seguridadyempleo.com'
},
{
url: 'https://i.postimg.cc/VkzD1WH6/IMG-20240227-004042-117.jpg',
title: '🔒 Formación en Gestión de Eventos',
text: 'Inscríbete en nuestro curso de Gestión de Eventos y Planes de Seguridad. Oferta especial para estudiantes de seguridad privada.',
phone: 'tel:+34601510452',
whatsapp: 'https://wa.pe/iniseg',
web: 'https://cursos.seguridadyempleo.com'
},
{
url: 'https://i.postimg.cc/Hn3hvFj1/IMG-20240730-WA0029.jpg',
title: '🎓 Oferta seguidores: Curso Superior de Auditor de Seguridad de la UCAM',
text: 'Accede a nuestros descuentos exclusivos en formación en seguridad. ¡Inscríbete ahora!',
phone: 'tel:+34601510452',
whatsapp: 'https://wa.pe/iniseg',
web: 'https://cursos.seguridadyempleo.com'
},
{
url: 'https://i.postimg.cc/66L5XwDb/Captura-de-pantalla-2024-09-14-122944.png',
title: '🏠 Protege tu Hogar',
text: 'Aprovecha nuestros sistemas avanzados de seguridad para proteger a tu familia. ¡Consulta nuestras promociones especiales!',
phone: 'tel:+34601510452',
whatsapp: 'https://wa.me/34601510452',
web: 'https://promociones.seguridadyempleo.com'
},
{
url: 'https://i.postimg.cc/C1fjV2kK/photo-2024-07-11-12-17-30.jpg',
title: '🎉 Promociones Exclusivas para Seguidores',
text: 'Pregunta por nuestras promociones especiales diseñadas para nuestros seguidores más fieles. ¡Contáctanos ya!',
phone: 'tel:+34601510452',
whatsapp: 'https://wa.me/34601510452',
web: 'https://promociones.seguridadyempleo.com'
}
];
// Mostrar un pop-up aleatorio
function showRandomPopup() {
const randomIndex = Math.floor(Math.random() * popups.length);
const randomPopup = popups[randomIndex];
document.getElementById("popup-title").innerText = randomPopup.title;
document.getElementById("popup-image").src = randomPopup.url;
document.getElementById("popup-text").innerText = randomPopup.text;
document.getElementById("call-btn").href = randomPopup.phone;
document.getElementById("whatsapp-btn").href = randomPopup.whatsapp;
document.getElementById("web-btn").href = randomPopup.web;
}
// Ejecutar la función cuando el pop-up aparezca
setTimeout(() => {
showRandomPopup();
}, 10000);
</script>
</!doctype>
No hay comentarios:
Publicar un comentario
DEJANOS TU COMENTARIO