In HTML, only the ID changes, which is not the case in JS. Everyone seems to have CLOSE, but only the 1st works. The rest, for some reason, are closed only by a click outside the window, and the cross is not closed.

<script type="text/javascript"> var modalz = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var spa1 = document.getElementsByClassName("close")[0]; var spa2 = document.getElementsByClassName("close")[1]; var spa2 = document.getElementsByClassName("close")[2]; var mod_cont1 = document.getElementsByClassName("modal-content")[0]; var mod_cont2 = document.getElementsByClassName("modal-content")[1]; var mod_cont3 = document.getElementsByClassName("modal-content")[2]; var mod_cont4 = document.getElementsByClassName("modal-content")[3]; var mod_cont5 = document.getElementsByClassName("modal-content")[4]; var mod_cont6 = document.getElementsByClassName("modal-content")[5]; var mod_cont7 = document.getElementsByClassName("modal-content")[6]; var mod_cont8 = document.getElementsByClassName("modal-content")[7]; var mod_class = document.getElementsByClassName("modal")[0]; btn.onclick = function() { modalz.style.display = "block"; } spa1.onclick = function() { modalz.style.display = "none"; } spa2.onclick = function() { two.style.display = "none"; } mod_cont1.onclick = function (event) { event.stopPropagation(); } mod_cont2.onclick = function (event) { event.stopPropagation(); } mod_cont3.onclick = function (event) { event.stopPropagation(); } mod_cont4.onclick = function (event) { event.stopPropagation(); } mod_cont5.onclick = function (event) { event.stopPropagation(); } mod_cont6.onclick = function (event) { event.stopPropagation(); } mod_cont7.onclick = function (event) { event.stopPropagation(); } mod_cont8.onclick = function (event) { event.stopPropagation(); } modalz.onclick = function(event){ modalz.style.display = "none"; } var two = document.getElementById('two'); var raz = document.getElementById("raz"); var spaned = document.getElementsByClassName("close")[0]; two.onclick = function(e){ this.style.display = 'none'; } raz.onclick = function(e) { two.style.display = "block"; e.stopPropagation(); } var thereon = document.getElementById('thereon'); var there = document.getElementById("there"); var spaned = document.getElementsByClassName("close")[0]; thereon.onclick = function(e){ this.style.display = 'none'; } there.onclick = function(e) { thereon.style.display = "block"; e.stopPropagation(); } var fooon = document.getElementById('fooon'); var foo = document.getElementById("foo"); var spaned = document.getElementsByClassName("close")[0]; fooon.onclick = function(e){ this.style.display = 'none'; } foo.onclick = function(e) { fooon.style.display = "block"; e.stopPropagation(); } var fiveon = document.getElementById('fiveon'); var five = document.getElementById("five"); var spaned = document.getElementsByClassName("close")[0]; fiveon.onclick = function(e){ this.style.display = 'none'; } five.onclick = function(e) { fiveon.style.display = "block"; e.stopPropagation(); } var sixeon = document.getElementById('sixon'); var six = document.getElementById("six"); var spaned = document.getElementsByClassName("close")[0]; sixon.onclick = function(e){ this.style.display = 'none'; } six.onclick = function(e) { sixon.style.display = "block"; e.stopPropagation(); } var sevenon = document.getElementById('sevenon'); var seven = document.getElementById("seven"); var spaned = document.getElementsByClassName("close")[0]; sevenon.onclick = function(e){ this.style.display = 'none'; } seven.onclick = function(e) { sevenon.style.display = "block"; e.stopPropagation(); } var eathon = document.getElementById('eathon'); var eath = document.getElementById("eath"); var spaned = document.getElementsByClassName("close")[0]; eathon.onclick = function(e){ this.style.display = 'none'; } eath.onclick = function(e) { eathon.style.display = "block"; e.stopPropagation(); } </script> 
 <a id="myBtn"> div id="myModal" class="modal"> <div class="modal-content"> <span class="close">&times;</span>

Closed due to the fact that the essence of the question is not clear by the participants user207618, br3t , Android Android , Kostiantyn Okhotnyk , Lex Hobbit 13 Aug '17 at 21:09 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

    2 answers 2

    In your case it is impossible to give an answer on the merits of the question. Try the codestyle first. For example, the string

     document.getElementsByClassName("modal-content")[0]

    Replaced by something like:

     // your func was good too, but I love querySelector var modals = document.querySelectorAll('.modal'); [].forEach.call(modals, function(item) { console.log(item.innerHTML) // item.onclick = function() {} }); 
     <div class='modal'>1</div> <div class='modal'>2</div> <div class='modal'>3</div> <div class='modal'>4</div>

    So, please arrange the code first, and then ask.

    • Vyacheslav, thanks for the answer, then such a question, and if you can visually see it all on the site, in that case there is an opportunity to get an answer to the current question? - Erik Spichak
    • Yes of course. And rewrite is normal in addition - Vyacheslav Potseluyko

     var modalz = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var spa1 = document.getElementsByClassName("close")[0]; var spa2 = document.getElementsByClassName("close")[1]; var spa3 = document.getElementsByClassName("close")[2]; var spa4 = document.getElementsByClassName("close")[3]; var spa5 = document.getElementsByClassName("close")[4]; var spa6 = document.getElementsByClassName("close")[5]; var spa7 = document.getElementsByClassName("close")[6]; var spa8 = document.getElementsByClassName("close")[7]; var mod_cont1 = document.getElementsByClassName("modal-content")[0]; var mod_cont2 = document.getElementsByClassName("modal-content")[1]; var mod_cont3 = document.getElementsByClassName("modal-content")[2]; var mod_cont4 = document.getElementsByClassName("modal-content")[3]; var mod_cont5 = document.getElementsByClassName("modal-content")[4]; var mod_cont6 = document.getElementsByClassName("modal-content")[5]; var mod_cont7 = document.getElementsByClassName("modal-content")[6]; var mod_cont8 = document.getElementsByClassName("modal-content")[7]; var mod_class = document.getElementsByClassName("modal")[0]; btn.onclick = function() { modalz.style.display = "block"; } spa1.onclick = function() { modalz.style.display = "none"; } spa2.onclick = function() { two.style.display = "none"; } spa3.onclick = function() { thereon.style.display = "none"; } spa4.onclick = function() { fooon.style.display = "none"; } spa5.onclick = function() { fiveon.style.display = "none"; } spa6.onclick = function() { sixon.style.display = "none"; } spa7.onclick = function() { sevenon.style.display = "none"; } spa8.onclick = function() { eathon.style.display = "none";

    here is the solution