Close the modal when user clicks outside the modal

The ‘id03’ seems working when user clicked outside of the modal then it will close, while ‘id02’ and ‘id01’ didnt works. User clicked outside the modal then nothing happens

<script>
function messagesending(e) {
        document.getElementById("id01").style.display="block";
    }

    function refusealert(e) {
        document.getElementById("id02").style.display="block";
    }

    function confirmalert(e) {
        document.getElementById("id03").style.display="block";
    }

<script>
// Get REFUSE modal
var modal = document.getElementById('id01');        
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}    
 </script>

 <script>
 // Get CONFIRMATION modal
 var modal = document.getElementById('id02');        
 // When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
 if (event.target == modal) {
    modal.style.display = "none";
}
}    
 </script>

 <script>
 // Get SENDMESSAGE modal
 var modal = document.getElementById('id03');        
 window.onclick = function(event) {
 if (event.target == modal) {
    modal.style.display = "none";
}
}    
 </script>

 <script>
    $(document).ready(function(){
    $("#oni").click(function(){
    $("#container").toggle(1000);
    });
 </script>

Is there something that i missed? Basically ‘id01’, ‘id02’, ‘id03’ are in same css code, i just copied and paste with different content. Please refer to this https://jsfiddle.net/r3qt7fdg/

Answer

As kwiat1990 mentioned the problem is, what I read from your code, the var modal, which is global, gets overridden, and ends up as document.getElementById('id03'). The code inside the onclick functions is executed after the click. At that time event.target == modal will only be true for the sendmessage modal.

The easy fix is to move var modal inside the click function, making it local to the function. I’ve also removed the excess script tags and properly closed the $(document).ready function.

EDIT: of course window.onclick will set onclick property of window, so each one was overwriting the other and only the last one saved. So, adding event listeners was needed:

<script>
window.addEventListener("click", function(event) {
  // Get REFUSE modal
  var modal = document.getElementById('id01');
  // When the user clicks anywhere outside of the modal, close it
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

window.addEventListener("click", function(event) {
  // Get CONFIRMATION modal
  var modal = document.getElementById('id02');
  // When the user clicks anywhere outside of the modal, close it
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

window.addEventListener("click", function(event) {
  // Get SENDMESSAGE modal
  var modal = document.getElementById('id03');
  // When the user clicks anywhere outside of the modal, close it
  if (event.target == modal) {
    modal.style.display = "none";
  }
});    
</script>

https://jsfiddle.net/r3qt7fdg/1/

Also, 1 event listener will be enough, for instance by checking the className of the element:

window.addEventListener("click", function(event) {
  // When the user clicks on element with class="modal", close it
  console.log(event.target); // element that was clicked
  if (event.target.className == "modal") {
    event.target.style.display = "none";
  }
});

https://jsfiddle.net/r3qt7fdg/2/

Maybe better is listen for click on “.modal” itself. In jquery it would be:

$(".modal").click(function() {
  if (event.target.className == "modal") {
    $(event.target).hide();
  }
});