Modal window only opens and does not close

Question

I have a modal window inside of a div, when passing the mouse on top, I make the div change color and opens a modal window with photo, the problem is that this modal window just opens, and just doesn’t close. Someone can help me with this, I don’t know where else to turn.

<script>
     function clique(img){
       var modalJ=document.getElementById("janelaModal");
       var modalI=document.getElementById("imgModal").src=["pg/CadastroUsuario.jpg"];
       var modalB=document.getElementById("btFechar");


       modalJ.style.display="block";
       modalI.src=img;
       modalB.onclick=function(){
        modalJ.style.display="none";
       }
     } 

    </script>

   <style type="text/css">
        .servico:hover {
         cursor: zoom-in;
         background:orange;
        }

     </style>

And here’s the code for the div and the modal window.

<article class="servico wow fadeInUp" onclick='clique("imgModal")';>        
<a href="#" class="fadeImg"><img src="imag/monitor.png" alt="Logo do sistema"></a>
    <div class="inner">         
    <a href="#"><center><h3>Tela Inicial</h3></center></a>
    <h4>Uma empresa segura e com seus dados bem guardados, protegidos e também gerando uma rede de informações mais rápida!.</h4>
    </div>  
         <div id="janelaModal">
         <span id="btFechar">X</span>
         <img id="imgModal">     
        </div>          
</article>

Answer 1

It turns out that the modal is inside the article that calls the onclick when it is clicked, just by clicking on the button to close at the same time it is clicking on the article that opens the modal.

The correct one was the modal to be independent of the article, but in your case you can avoid the Bubbling adding in the event that closes the modal event.stopPropagation():

modalB.onclick=function(event){
   event.stopPropagation();
   modalJ.style.display="none";
}

With this, clicking the button that closes the modal will not trigger the onclick of the article (Bubbling).

*Bubbling (event bubbling) is a type of event propagation in which the event first fires at the destination element more and then shoots successively at the ancestors of the destination element in the same nesting hierarchy until reaching the DOM element or external document object.