Como fechar modal HTML?

Front-end
, ,
#1

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?

1 curtida
#2

Como vc implementou essa modal?

#3

Sim. Só falta essa parte de fechar clicando fora dela.

#4

Eu perguntei como esta modal foi implementada. Tipo, vc criou ela do zero ou está usando alguma coisa pronta?

#5

Ah sim, desculpa. Do zero, ainda tô no básico da linguagem.

#6

Posta o codigo da sua modal pra gente ver

#7

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;

}

#8

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’;
}

#9

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>
2 curtidas
#10

Muito legal velho. Valeu!