Ciao a tutti, ho un problema che spero possiate aiutarmi a risolvere.

Utilizzo il seguente script per gestire una gallery nel mio sito:

codice:
<script>

function openModal() {
$("#myModal").fadeIn(300);
  document.getElementById("myModal").style.display = "block";
}


function closeModal() {
  var modal = document.getElementById("myModal");
  $(modal).fadeOut(300);
}


var modal = document.getElementById("myModal");
modal.addEventListener('click', function(e) {
  if (e.target === modal) {
    closeModal();
  }
});


var slideIndex = 1;
showSlides(slideIndex);


function plusSlides(n) {
  var slides = $(".mySlides");
  var currentIndex = slideIndex - 1;
  var nextIndex = currentIndex + n;


  if (nextIndex < 0) {
    nextIndex = slides.length - 1;
  } else if (nextIndex >= slides.length) {
    nextIndex = 0;
  }


  var currentSlide = $(slides[currentIndex]);
  var nextSlide = $(slides[nextIndex]);


  currentSlide.fadeOut(500);
  nextSlide.fadeIn(500, function() {
    currentSlide.hide();
    nextSlide.css("display", "block");
    slideIndex = nextIndex + 1;
  });




   // aggiorna la classe active della thumbnail corrente
  var dots = document.getElementsByClassName("demo");
  for (var j = 0; j < dots.length; j++) {
    if (j === nextIndex) {
      dots[j].className += " active";
    } else {
      dots[j].className = dots[j].className.replace(" active", "");
    }
  }
}


function currentSlide(n) {
  var slides = $(".mySlides");
  var dots = $(".demo");


  // aggiorna slideIndex con il valore dell'immagine miniatura cliccata
  slideIndex = n;


  // nascondi tutti gli altri slide tranne quello corrente
  for (var i = 0; i < slides.length; i++) {
    if (i !== n - 1) {
      $(slides[i]).fadeOut(500);
    }
  }


  // applica l'effetto fade al slide corrente
  $(slides[n - 1]).fadeIn(500);


  // aggiorna la classe active della thumbnail corrente
  for (var j = 0; j < dots.length; j++) {
    if (j === n - 1) {
      dots[j].className += " active";
    } else {
      dots[j].className = dots[j].className.replace(" active", "");
    }
  }
}


function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
In precedenza questo script era posizionato erroneamente nella struttura html, in quanto stava dopo il tag di chiusura </html>.

Ciò nonostante funzionava correttamente.

Adesso, per evidenti ragioni di pulizia e validazione del codice, ho posizionato lo script tra i tag "head".

Da quando ho fatto questo lo script continua a funzionare, ma ha perso una delle sue caratteristiche.

Infatti avevo implementato una funziona per cui al clic in un punto a caso della pagina, al di fuori della gallery, quest'ultima si chiudeva.

Prima dello spostamento, quando lo script era posizionato dopo il tag </html>, la sopra descritta funzione di chiusura funzionava.

Adesso non funziona più e la gallery si può chiudere solo con il classico click sulla X che ho posizionato in alto a destra.

Avete idea di quale possa essere la causa di tale comportamento?

Perché se mal posizionato lo script funzionava e adesso che è correttamente posizionato presenta questo difetto?

Grazie per il supporto!