Tengo el siquiente escenario.
Lanzo una ventana modal automáticamente que me muestra un banner reuniendo las siguientes condiciones:
- Muestra la imagen con un aviso (aviso.jpg). Si este no existe...
- Muestra un banner dependiendo de el día de la semana ('diaDeLaSemana'.jpg). Si este no existe...
- No despliega la ventana modal
Es en el punto 3 donde tengo el problema, no tengo claro como, dentro del ajax; evitar que el modal aparezca si no se cumplen ambas condiciones.
Este es mi html:
<div>
<div class="dark">
<div class="close">x</div>
</div>
<div class="message">
<div id="promo"></div>
</div>
</div>
Este es mi jquery:
$(document).ready(function() {
function banner(){ // Despliega banner promocional en ventana modal.
let date = new Date(); // almaecna la fecha actual
let days = [ // especificamos los días de la semana en letras
'domingo',
'lunes',
'martes',
'miercoles',
'jueves',
'viernes',
'sabado'
];
let day = days[date.getDay()] // captura el día actual en la variable
let bannerDay = document.getElementById("promo"); // representa al contenedor 'promo'
function modal(){ // función para desplegar la ventana modal.
$(".dark, .message").css("opacity", "1").delay(1000).fadeToggle(1200);
$('.close, .dark').click(function() {
$('.dark, .message').fadeOut();
});
} // finaliza modal()
$.ajax({
url:'promos-internas/aviso.jpg',
success: function(){ // Mostramos banner de noticia si existe. Ejecutamos la función "modal".
bannerDay.innerHTML = '<img src="promos-internas/aviso.jpg" alt="">';
modal();
},
error: function(){ // determinamos qué banner se mostrará dependiendo del día de la semana. Ejecutamos la función "modal".
i = 0;
while (i < days.length) {
if (day === days[i]) {
bannerDay.innerHTML = '<a href="promociones-del-mes"><img src="promociones/images/'+days[i]+'.jpg" alt=""></a>';
modal();
}i++;
}
}
}); // finaliza $.ajax
}; // finaliza banner()
banner(); // Comentar para deshabilitar el modal
}
No considero muy necesario colocar el CSS ya que el modal funciona correctmente, pero igual aqui va:
.dark, .message {display: none; opacity: 0; position: fixed;}
.dark {
background: rgba(0,0,0,.75);
z-index: 1001; left: 0; top: 0;
width: 100%; height: 100%;
}
.message {
z-index: 1002; background: #fff;
padding: 10px; left: 50%; top: 50%;
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.dark .close {
position: absolute; width: 30px; height: 30px;
top: 12px; right: 12px;
cursor: pointer; z-index: 10; color: #fff;
text-align: center; font: 2.5rem/1.1 Arial;
}
Espero los maestros puedan iluminarme. Gracias de antemano.