0

Fiz um modal e preciso que ele seja fechado ao clicar fora dele ou no botão de fechar. Já tentei fazer com onblur só que não funciona, serve só para tag input. Como devo fazer?

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>

1 Resposta 1

3

Dei respostas parecidas aqui e aqui. Neste caso é ainda mais simples pois tens um elemento a funcionar como overlay onde só precisas de detectar se ouve um clique nele com

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

Exemplo:

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>

8
  • Não entendi direito o addeventlistener e o target
    – nelson450
    19/08/2017 às 13:52
  • @nelson450 sabes o que faz o addEventListener?
    – Sergio
    19/08/2017 às 13:53
  • Não, e o target não conheço muito bem
    – nelson450
    19/08/2017 às 14:02
  • 1
    @nelson450 o addEventListener regista no evento que queres ser avisado quando um dado evento acontece. O evento que queres "escutar" passas como primeiro argumento e a função a correr passas como segundo argumento. Faz sentido? (explico mais se até aqui compreenderes)
    – Sergio
    19/08/2017 às 14:06
  • 1
    OK, entendi agora, obrigado
    – nelson450
    19/08/2017 às 14:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .