Close modal when user clicks outside of it, why is there == and not !=?

Question

I looked at some code from here: https://www.w3schools.com/howto/howto_css_modals.asp , but I want to understand why is there == and not != in the folowing part of code:

// Get the modal
var modal = document.getElementById('yourModalId');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

We want to close the window when the outside of the modal is clicked. Why is there an equal sign there than?

Answer 1

Looks like it's because modal is the background, and modal-content is what you think should be the modal.

See the working example here , and notice this block of CSS:

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

Answer 2

Based on the link provided, modal is the lightbox of the modal. (The transparent background) So when a user clicks that, close the modal.