Como colocar 'Close,Fechamento' num box de <DIV> com JS?

Front-end
#1

Olá Gujeiros! :slight_smile:

Preciso de ajuda para fazer um box de DIV com fechamento, para fazer infos para o meu projeto.
Se quiser pode ser com framework jQuery.

NOTA: Sou WebDeisgner, sei só o básico de JS.

#2

Alguém?

#3

Sua div tem um id e sua box tem uma ancora?

Se sim, nela vc pode adicionar um evento de click na ancora pedindo o fechamento (no seu caso display none) da div…

<a onclick="document.getElementById('id_da_div').style.display = 'none';">...

Isso seria diretamente sem funções, se quiser deixar reutilizável, recomendo function…

function fechaBox(id) {
    document.getElementById(id).style.display = 'none';
}

E na ancora:

<a onclick="fechaBox('id_da_div');">...

São ideias sem seu código fica dificil indicarmos algo pontual… boa sorte!

#7

Na verdade é uma classe, ja tentei onclick="document.getElementByClassName('classe').style.display = 'none';"

só que não esta fechando, poderia me ajudar?

#8

Não será porque vc digitou errado getElement (singular) deveria ser getElementsByClassName (plural)…

https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Tenha em mente que qualquer outro elemento que tem o nome da sua classe css, também vai ser escondido (fechado) ok? Por isso te indiquei usar id, já que apenas 1 único elemento pode ter sem se repetir, resumindo id cada um tem o seu, classe vários podem ter a mesma, por isso também o próprio js já dá pistas…

var id = document.getElementById('id'); //unico, por isso é Element (singular)
var classe = document.getElementsByClassName('classe'); //vários Elements (plural)
var elementos = document.getElementsByTagName('p'); //vários Elements (plural)

Espero ter ajudado, boa sorte!

#9

vlw amigo! consegui com este código…

var content = document.getElementsByClassName('login-box')[0];
		document.getElementsByClassName('close')[0].addEventListener('click',function(){
content.style.display = "none";

});

Grato pela ajuda! :smiley:

2 curtidas