Fechar modal ao clicar fora dele JS

Programação
#1

Opa. Esse é meu código:

        <button class="button-plus">
          <img id="hdesign" class="icon-plus" src="/Digicare-Biomedical-Careers/img/icon-plus.png" alt="">
        </button>
      </div>
      <div class="modal hdesignposition" id="hdesignmodal">
        <button  class="buttonclose" id="hdesignclose">X</button>
        <div class="content-modal">
          <h1>Title Modal</h1>
          <p>Text Modal
            </p>
        </div>
        <div class="footermodal">
          <p class="statusteam">Status: Accepting applications for future openings.</p>
          <p>&puncsp;</p>
          <p class="jobtitle">Hardware Design and Bio Signals</p>
          <a class="formbutton" target="_blank"  href="#">Apply</a>
        </div>

const showhdesign = document.getElementById("hdesign");

const modalhdesign = document.getElementById("hdesignmodal");

const closehdesign = document.getElementById("hdesignclose");

showhdesign.addEventListener("click", () => {
  modalhdesign.style.display = "block";
});

closehdesign.addEventListener("click", () => {
  modalhdesign.style.display = "none";
  
});

Gostaria que me ajudassem, não consigo pensar numa maneira de fechar o modal ao clicar fora do mesmo.
Obrigado.

#2

Cara, fiz esse exemplo:

usuário clica no backdrop, no conteúdo “fora” e o modal fecha, acredito que seja o jeito mais facil

https://jsfiddle.net/rodriguesabner/a5gLf0m8/2/

Vou deixar dois eventos aí.

detectando evento de click no #root: 

const root = document.getElementById("root");
root.addEventListener("click", (event) => {
	if (!event.target.matches("#modal")) {
      closeModal()
    }
});

detectando evento no backdrop (background mais escuro atras do modal)

(prefiro esse)

const backdrop = document.getElementById("backdrop");

backdrop.addEventListener("click", (event) => {
	closeModal();
});
1 curtida
#3

Valeu irmão, bem fácil e eu moscando. Muito tempo programando me deixando doido. A última opção é realmente a melhor.

1 curtida
#4

Agora com mais calma consegui pensar num modo mais simples. Da uma olhada:

      window.addEventListener('mouseup',function(event){
        var pol = document.getElementById('qualitymodal');
        if(event.target != pol && event.target.parentNode != pol){
            pol.style.display = 'none';
        }
  });

https://jsfiddle.net/5uwx1mdo/1/

Assim, quando clico para abrir outro modal (tenho vários na mesma página) o que está aberto fecha. Mas muito obrigado pela luz hahahahauha.