Unable to close modal in Javascript

Question

I'm writing some js code in my ebook project. The problem is in a modal, used to show, like a popup, reference from others pages. Here is the part of my project dedicated to close the modal.

    // Riferimento al Modal
var modal = document.getElementById('modalversetti');
// Riferimento allo <span> che chiude il Modal
var span = document.getElementsByClassName("close")[0];
// Quando l'utente preme sullo <span> (x), si chiude il Modal
span.onclick = function() {
modal.style.display = "none";
}

And here (better) all the code (js+html+css) showing the modal running but unable to close. https://jsfiddle.net/emanuele_tinari/gkL5sh3x/ Modal built via js run very well, but, unfortunately, close button seems don't. thanks.

Answer 1

Your code tries to find the close span to attach the listener immediately when the page loads. You haven't created the modal at this point, so it fails.

If you cut the chunk of code in your question and paste it immediately at the end of the function that creates your modal, the close button will work.

Answer 2

This will do the work :

  document.onclick = function(event) {
    var el = event.target;
    if (el.className == "close") {
    // Riferimento al Modal
    var modal = document.getElementById('modalversetti');

        modal.style.display = "none";
    }
};

but you have more problems with your code ...