Codigos ventanas emergentes para shorcode

Ventana emergente ordenar por:

2 Ordenar por (productos)

function add_popup_link_and_script_orden() {
?>
<style>
/* Estilos para la ventana emergente */
.popup-overlay-orden {
display: none; /* Oculto por defecto */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
}

.popup-content-orden {
position: absolute;
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1001;
max-width: 90%;
width: 400px;
}

.popup-header-orden {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #323232; /* Fondo del botón */
color: #e6e6e6; /* Color del texto */
padding: 7px; /* Relleno del botón */
border-radius: 8px 8px 0 0;
font-size: 17px; /* Tamaño de texto */
cursor: pointer;
transition: background-color 0.3s;
text-align: center;
position: relative; /* Para alinear el icono de cerrar */
}

.popup-header-orden:hover {
background-color: #b40000; /* Color de fondo al pasar el cursor */
}

.popup-header-orden .icon-close-orden {
font-size: 20px; /* Tamaño del icono */
color: #ffffff; /* Color del icono */
position: absolute;
right: 10px; /* Distancia del icono al borde derecho */
top: 50%; /* Alineación vertical al centro */
transform: translateY(-50%);
cursor: pointer;
}
</style>

<a href="#" id="open-popup-link-orden"></a>

<div class="popup-overlay-orden" id="popup-overlay-orden">
<div class="popup-content-orden">
<div class="popup-header-orden" onclick="closePopupOrden()">
Ver orden de productos
<span class="icon-close-orden" id="popup-close-orden">&times;</span>
</div>
<?php echo do_shortcode('[wpf-filters id=3]'); ?>
</div>
</div>

<script>
function openPopupOrden() {
document.getElementById('popup-overlay-orden').style.display = 'block';
}

function closePopupOrden() {
document.getElementById('popup-overlay-orden').style.display = 'none';
}

document.getElementById('open-popup-link-orden').addEventListener('click', function(e) {
e.preventDefault();
openPopupOrden();
});

document.getElementById('popup-close-orden').addEventListener('click', function() {
closePopupOrden();
});

window.addEventListener('click', function(e) {
if (e.target == document.getElementById('popup-overlay-orden')) {
closePopupOrden();
}
});
</script>
<?php
}
add_action('wp_footer', 'add_popup_link_and_script_orden');

 

 

 

2 Filtrar Ventana emergente centrado arriba

Enlace <a href="#" id="open-popup-link-relacionado">AQUI TU TEXTO</a>

o usar ID en botón de elementor: open-popup-link-relacionado

 

 

function add_popup_link_and_script_relacionado() {
?>
<style>
/* Estilos para la ventana emergente */
.popup-overlay-relacionado {
display: none; /* Oculto por defecto */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
}

.popup-content-relacionado {
position: absolute;
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1001;
max-width: 90%;
width: 400px;
}

.popup-header-relacionado {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #323232; /* Fondo del botón */
color: #e6e6e6; /* Color del texto */
padding: 12px; /* Relleno del botón */
border-radius: 8px 8px 0 0;
font-size: 15px; /* Tamaño de texto */
cursor: pointer;
transition: background-color 0.3s;
text-align: center;
position: relative; /* Para alinear el icono de cerrar */
}

.popup-header-relacionado:hover {
background-color: #b40000; /* Color de fondo al pasar el cursor */
}

.popup-header-relacionado .icon-close {
font-size: 20px; /* Tamaño del icono */
color: #ffffff; /* Color del icono */
position: absolute;
right: 10px; /* Distancia del icono al borde derecho */
top: 50%; /* Alineación vertical al centro */
transform: translateY(-50%);
cursor: pointer;
}
</style>

<a href="#" id="open-popup-link-relacionado"></a>

<div class="popup-overlay-relacionado" id="popup-overlay-relacionado">
<div class="popup-content-relacionado">
<div class="popup-header-relacionado" onclick="closePopup()">
Ver productos filtrados
<span class="icon-close" id="popup-close-relacionado">&times;</span>
</div>
<?php echo do_shortcode('[wpf-filters id=2]'); ?>
</div>
</div>

<script>
function openPopup() {
document.getElementById('popup-overlay-relacionado').style.display = 'block';
}

function closePopup() {
document.getElementById('popup-overlay-relacionado').style.display = 'none';
}

document.getElementById('open-popup-link-relacionado').addEventListener('click', function(e) {
e.preventDefault();
openPopup();
});

document.getElementById('popup-close-relacionado').addEventListener('click', function() {
closePopup();
});

window.addEventListener('click', function(e) {
if (e.target == document.getElementById('popup-overlay-relacionado')) {
closePopup();
}
});
</script>
<?php
}
add_action('wp_footer', 'add_popup_link_and_script_relacionado');