How to close a modal by clicking outside it?

Question

I made a modal and I need it to be closed by clicking outside of it or the close button. I’ve tried to do with onblur only it doesn’t work, it’s only for tag input. How should I do?

function abre() {
			document.getElementById('modal').style.display = 'block';
}
function fecha() {
			document.getElementById('modal').style.display = 'none';
}

#modal{
			display: none;
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}
		#modalcont{
			width: 400px;
			height: 300px;
			border: 2px solid black;
			position: relative;
			left: 35%;
			top: 20%;
			background-color: lightblue;
			text-align: center;
		}
		#close{
			position: absolute;
			border-radius: 50%;
			font-size: 26px;
			padding: 10px;
			background-color: lightgreen;
			text-align: center;
			right: -10px;
			top: -20px;
			cursor: pointer;
		}

<button onclick="abre()">abra o modal!</button>
	<div id="modal" onblur="fecha()">
		<div id="modalcont">
			<a onclick="fecha()" id="close">X</a>
			<p>teste desse modal</p>
		</div>
	</div>

Answer 1

I gave similar answers here and here. In this case, it’s even simpler because you have an element overlay where you only need to detect if you hear a click on it with

modal.addEventListener('click', function(e) {
  if (e.target == this) fecha();
});

Example:

var modal = document.getElementById('modal');
modal.addEventListener('click', function(e) {
  if (e.target == this) fecha();
});

function abre() {
  modal.style.display = 'block';
}

function fecha() {
  modal.style.display = 'none';
}

#modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#modalcont {
  width: 400px;
  height: 300px;
  border: 2px solid black;
  position: relative;
  left: 35%;
  top: 20%;
  background-color: lightblue;
  text-align: center;
}

#close {
  position: absolute;
  border-radius: 50%;
  font-size: 26px;
  padding: 10px;
  background-color: lightgreen;
  text-align: center;
  right: -10px;
  top: -20px;
  cursor: pointer;
}

<button onclick="abre()">abra o modal!</button>
<div id="modal" onblur="fecha()">
  <div id="modalcont">
    <a onclick="fecha()" id="close">X</a>
    <p>teste desse modal</p>
  </div>
</div>