Tenho um modal que fecha (via função javascript) após clique no botão type="submit", isso ta ok, mas quero que o modal feche tbm se o usuário clicar fora da área dele. Como fazer isso?
Como fechar modal HTML?
D
9 Respostas
Como vc implementou essa modal?
D
Sim. Só falta essa parte de fechar clicando fora dela.
Eu perguntei como esta modal foi implementada. Tipo, vc criou ela do zero ou está usando alguma coisa pronta?
D
Ah sim, desculpa. Do zero, ainda tô no básico da linguagem.
Posta o codigo da sua modal pra gente ver
D
HTML:
<!-- modal lançamento -->
<div class="modal-lancamento">
<input type="submit" value="Lançar" class="inputs btn" onclick="fecharModalLancamento()">
</div>
CSS:
.modal-lancamento{
display: none;
width: 90%;
height: 300px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 10px;
box-shadow: 1px 1px 20px 1px #aaa;
}
D
Javascript:
// função abrir modal lançamento
function abrirModalLancamento(){
document.getElementsByClassName(‘modal-lancamento’)[0].style.display = ‘block’;
}
// função fechar modal lançamento
function fecharModalLancamento(){
document.getElementsByClassName(‘modal-lancamento’)[0].style.display = ‘none’;
}
Solucao aceita
2 likes
Olá Daniel, beleza?
veja se atende ao que você estava pensando.
//verifica todos os cliques no que ocorre no seu documento
document.addEventListener('click', function(e){
//verifica se o alvo do seu clique está sendo o modal ou um botão
if(e.target != document.getElementsByClassName('modal-lancamento')[0] && e.target != document.getElementsByClassName('btn')[0]){
fecharModalLancamento();
}
})
function abrirModalLancamento(){
document.getElementsByClassName('modal-lancamento')[0].style.display = 'block';
}
// função fechar modal lançamento
function fecharModalLancamento(){
document.getElementsByClassName('modal-lancamento')[0].style.display = 'none';
}
</script>
D
Muito legal velho. Valeu!
Criado 30 de maio de 2019
Ultima resposta 4 de jun. de 2019
Respostas 9
Participantes 3