Jump to content
halfar

fechar div ao clicar no X

Recommended Posts

De um jeito bem basico:

<div class="container">
	<div class="x">x</div>
</div>
<button class="btn">Abrir</button>
var content = document.getElementsByClassName('container')[0];
document.getElementsByClassName('btn')[0].addEventListener('click',function(){
	content.style.display = "block";
});
document.getElementsByClassName('x')[0].addEventListener('click',function(){
	content.style.display = "none";
});
.container{
  position:relative;
  width:100px;
  height:100px;
  background:#000;
  display:none;
}
.x{
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 17px;
    color: #787878;
    background: #fff;
    padding: 4px 8px;
    cursor: pointer;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By rcsbnu27
      Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte:
      HTML
      <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#anosiniciais" > <img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#anosfinais" > <img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="section news-section" id="anosiniciais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div>

      <div class="section news-section" id="anosfinais">
      <div class="container">
      <div class="row">
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/5sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.ebmalbertostein.com" target="_blank">
      <img src="images/turmas/6sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.profgarrido.com" target="_blank">
      <img src="images/turmas/7sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/8sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/9sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      </div>
      </div>
      </div>
    • By lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
    • By lezão
      Boa noite!
      Td bem com vcs?
       
      Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.
      só encontrei como imagem, vejam.

       
      será que tem como fazer em css desse modelo, o texto tem q ficar sobreposto a cor do fundo.
       
    • By fideles
      Fala pessoal, como anda as coisas?
       
      Meu conhecimento em JS e quase neutro, conheço algo, mais talvez não o suficiente para o que eu precise, por isso venho pedir ajuda a vocês,
       
      Tenho um pequeno programinha, simples mesmo que tem 4 areas (Administração, Compras, Financeiro, Almoxarifado).
       
      Quem fica na ADM solicita algo,  compras visualiza e da um "ok" e o financeiro tbm tem que dar um "ok" e no final, o almoxarifado dá um "Processo Concluido" (está parte está ok, funcionando, sem erro)
       
      Meu problema seria que quem está no almoxarifado consegue clicar no botão "Processo Concluido" mesmo o pessoal de compras e financeiro não dando um "ok" na solicitação ou ele tbm consegue dar "Processo Concluido" se um ou outro dar um "ok". Precisaria que ele so conseguisse dar "Processo Concluido" se os dois darem o "ok", se so um dar "ok" ele não pode dar "Processo Concluido".
       
      Alguém consegue pelo menos me dar um norte para que eu possa dar continuidade? Já tentei em PHP e nada.
       
    • By FabianoSouza
      Pessoal, é possível abrir uma nova aba/janela do navegador dentro de uma DIV?
      Como faço?
       
      Pergunto isso porque o IFRAME não vai funcionar para o meu objetivo (já testei).
       
      Estou tentando adaptar esse código JQUERY para o Javascript puro, pra saber se a ideia funciona (não manjo de JQUERY).
      https://stackoverflow.com/questions/33296867/how-to-open-the-content-inside-a-div-tag-in-new-tab
       
      Grato.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.