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>