Closing Modal by clicking on body - Angular

Question

I have created a modal in my html file. I open it by clicking in a button and then I execute a method

This js method is the following:

  openModal() {
    var modal = document.getElementById('myModal');
    modal.style.display = "block";
  }

and it works. Now what I want to do is to close it by clicking in the body of my website so I have added 3 lines:

openModal() {
    var modal = document.getElementById('myModal');
    modal.style.display = "block";

    $(document).on('click', 'body *', function () {
      modal.style.display = "none";
    });
  }

The problem seems to be that one click on my mouse is more than one to the computer so it always executes:

modal.style.display = "block";

and then with the same click he calls also the click of:

    $(document).on('click', 'body *', function () {
      modal.style.display = "none";
    });

and it executes it`

I have also created a listener:

openModal() {
    var modal = document.getElementById('myModal');
    modal.style.display = "block";
    modal.addEventListener('click', function () {
      $(document).on('click', 'body *', function () {
        modal.style.display = "none";
      });
    });
  }

and it works for the first time but after closing it the listener keeps working so I can not do anything else (it always executes the listener line)

UPDATE I have tried also:

  openModal() {
console.log("OpenModal")
var modal = document.getElementById('myModal');
modal.style.display = "block";
modal.addEventListener('click', function () {
  console.log("EventListener")
  $(document).on('click', 'body *', function () {
    modal.style.display = "none";
    modal.removeEventListener('mousemove', function () { console.log("NoEventListener") });
  });
});

}

the behavior is the following:

I click on one button, and I call to openModal ( console.log("OpenModal") is working). The modal appears, I click on body and the event is triggered ( console.log("EventListener") is displayed ). After it, it does not appear console.log("NoEventListener") so removeEventListener is not working.

Then, when I click again to the button, I call again to addEventListener directly.

What I need is to finish the eventListener

Answer 1

You need to detect where is clicked into. Is the click is into .modal .

$(document).on('click', function (e) {
   if (!$(e.target).parents('.modal').length || ! $(e.target).is('.modal')) {
      modal.style.display = "none";
   }
});

Answer 2

In your modal function, you can get the current display style and change display according to its value :

openModal() {
    var modal = document.getElementById('myModal');
    var statut = modal.style.display;
    if (x === "block" {
    modal.style.display = "none";
   }
   else {
      modal.style.display = "none";
    }
  }