0

Tengo el siquiente escenario.

Lanzo una ventana modal automáticamente que me muestra un banner reuniendo las siguientes condiciones:

  1. Muestra la imagen con un aviso (aviso.jpg). Si este no existe...
  2. Muestra un banner dependiendo de el día de la semana ('diaDeLaSemana'.jpg). Si este no existe...
  3. 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.

2 respuestas 2

1

Probablemente hay maneras mas eficientes de hacerlo, pero al menos funciona:

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]) {

            var imagen = $('<img src="promociones/images/'+days[i]+'.jpg" />');
            if (imagen[0].width > 0) { //Si el ancho es mayor a 0 (cero), la imagen existe
                bannerDay.innerHTML = '<a href="promociones-del-mes"><img src="promociones/images/'+days[i]+'.jpg" alt=""></a>';
                modal();
            }
        } i++;
    }
}
4
  • No se si habrá otra forma pero me funcionó perfecto, gracias amigo
    – Elboy
    el 16 ago. 2020 a las 2:08
  • Amigo yo de nuevo, comentando que realmente funcionó, pero no completa el proceso en la primera carga de la página, es asta que doy actualizar que carga todo perfecto, si vuelvo a recargar con Ctrl+F5, no carga la parte final con el banner del día de la semana.
    – Elboy
    el 16 ago. 2020 a las 3:02
  • @Elboy: Tu petición Ajax se debe ejecutar en algún momento en específico? Respecto a tu función modal() te recomiendo ponerla fuera del $(document).ready(function(). No creo que tenga que ver con lo que experimentaste, pero solo por buena práctica
    – Sagnalrac
    el 16 ago. 2020 a las 6:00
  • Gracias Sagnalrac, la petición carga en el home de la página automáticamente, un segundo después de que ha cargado, veo que en la primera carga se ejecuta el script, pero al parecer no reconoce que exista "$('<img src="promociones/images/'+days[i]+'.jpg" />');", y por lógica termina el script sin cargar el modal, al recargar la página ya lo carga correctamente. supongo que el script cargá más rápido de lo que carga la imágen, pero no se como manejar eso, si es que realmente es lo que sucede.
    – Elboy
    el 16 ago. 2020 a las 15:42
1

Al final después de investigar por varios lados encontré como realizar lo que quería. Pego el código de como quedó al final, con esto cumplo las tres condiciones que buscaba:

  1. Muestra la imagen con un aviso (aviso.jpg). Si este no existe...
  2. Muestra un banner dependiendo de el día de la semana ('diaDeLaSemana'.jpg). Si este no existe...
  3. No despliega la ventana modal

Código: (seguí la recomendación de @Sagnalrac de sacar la función modal() del $(document).ready... También realicé alguna modificación estética al modal)

html:

<div>
<div class="dark">
    <div class="exit">
        <div class="bar bar1"></div> <div class="bar bar2"></div>
    </div>
</div>
<div class="message">
    <div id="promo"></div>
</div>

Jquery:

let date = new Date(); // almacena 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");

function modal(){ // función para desplegar la ventana modal.
    $(".dark, .message").css("opacity", "1").delay(1000).fadeToggle(1200);
    $('.exit, .dark').click(function() {
        $('.dark, .message').fadeOut();
    });
} // end modal()

function bannerPromo(){ // inserta el banner correspondiente al día de la semana si existe.
  i = 0;
    while (i < days.length) {
        if (day === days[i]) {
            let image = new Image();
            image.src = "promociones/images/"+days[i]+".jpg";
            let promodia = '<a href="promociones-del-mes"><img src="promociones/images/'+days[i]+'.jpg" alt=""></a>';
            image.onload = function() {
                bannerDay.innerHTML = promodia;
                modal();
            };
            image.onerror = function() {
                // si no hay imagen, no cargo modal()
            };
        }i++;
    }
} // end bannerPromo()

$(document).ready(function(){
    function banner(){ //  Despliega banner modal.
        $.ajax({
            url:'promos-internas/aviso.jpg',
            success: function(){ // Mostramos banner de noticia si existe. Ejecuta 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. Ejecuta modal().
                bannerPromo();
            }
        });
    }; // end banner()
    banner(); // lanza el modal
}) // end document ready

CSS:

.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 .exit {
    position: absolute;
    top: 18px; right: 15px;
    cursor: pointer; z-index: 1003;
}

.bar {
    width: 30px; height: 3px; margin: 6px 0;
    background: #fff; transition: 0.4s;
}
.bar1 {
    -webkit-transform: rotate(-45deg) translate(-3px, 3px);
    transform: rotate(-45deg) translate(-3px, 3px);
}.bar2 {
    -webkit-transform: rotate(45deg) translate(-4px, -4px);
    transform: rotate(45deg) translate(-4px, -4px);
}

@media screen and (max-width: 860px) {
    #promo img {width: 100%;}
    #message {width: 95%;}
}

No olviden que hay que cargar previamente la librería correspondiente de jquery. Nuevamente gracias a @Sagnalrac por tomarse el tiempo de ayudarme.

1
  • Lo ves? Por eso decía que no estaba seguro que fuera la manera más óptima. Me gustó aprender y/o conoer la técnica que empleaste finalmente. Saludos!
    – Sagnalrac
    el 17 ago. 2020 a las 1:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.