2

Gostaria de saber como adicionar "efeitos" em show e hide, eu tentei adicionar no meu código mas não obtive sucesso. Pois tentei mostrar apenas uma div comum com classe no css que desse a aparência que a da imagem abaixo tem, mas ele fica por trás de outros elementos, ele não fica na tela inteira como tem que ser.

Quando falo de efeito quero dizer um background transparente que pegasse toda a tela e aparecesse somente essa div branca no meio com o conteudo, você clica em uma pergunta no site e abre essa div com a resposta

inserir a descrição da imagem aqui

<div class="teste" style="width: 100%;height: 500px;background: rgba(52, 90, 76, 0.8);">

  <div style="margin: auto;width: 50%;height: 300px;background:   #fff;">
  conteudo da div blablabla blablabla blablabla blablabla blablabla   blablabla blablabla blablabla blablabla blablabla blablabla		
      </div>
</div>

7
  • Que efeitos? Coloque seu código também, senão fica um pouco difícil te ajudar Commented 9/10/2017 às 17:36
  • Podes mostrar o HTML e CSS que estás a usar?
    – Sergio
    Commented 9/10/2017 às 17:37
  • Eu fiz apenas um teste do que eu achei que seria o código, vou postar aqui, eu só tentei colocar o que eu quero mostrar dentro de uma div já modificada, mas não consigo fazer ela exatamente como eu gostaria Commented 9/10/2017 às 17:42
  • Eu gostaria de um background transparente que pegasse toda a tela e aparecesse somente essa div branca no meio com o conteudo, você clica em uma pergunta no site e abre essa div com a resposta. Commented 9/10/2017 às 17:46
  • 1
    É isto que procuras ? pt.stackoverflow.com/a/54072/129
    – Sergio
    Commented 9/10/2017 às 18:00

1 Resposta 1

3

O que você quer é um modal. Você poderia usar os modais do Bootstrap ou do JQueryUI, mas se quiser fazer o seu próprio, veja este exemplo que fiz:

$(document).ready(function() {

  // Mostra a div
  $("#pergunta").on("click", function() {
    $("#divBranca").show();
  })

  // Esconde a div ao clicar no X
  $(".fechar").on("click", function() {
    $("#divBranca").hide();
  });

});
/* CSS da div */

.modal {
  display: none;   /* Escondida por padrão */
  position: fixed; /* Fixa a posição */
  z-index: 1; /* Fica por cima de todos os elementos da página */
  padding-top: 100px;
  /* Localização da div na janela */
  left: 0;
  top: 0;
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  overflow: auto;   /* Adiciona scroll se preciso */
  background-color: rgb(0, 0, 0); /* Fundo branco*/
  background-color: rgba(0, 0, 0, 0.4); /* Transparência */
}


/* Conteúdo */

.conteudo-modal {
  background-color: #ffffff; /* Cor branca de fundo */
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* Botão fechar */

.fechar {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.fechar:hover,
.fechar:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Exemplo</h2>

<!-- Pergunta, pode ser qualquer elemento <span>, <a>, <p>, etc... -->
<a href="#" id="pergunta">Qual a resposta desta pergunta?</a>

<!-- A div branca -->
<div id="divBranca" class="modal">

  <!-- conteúdo da div -->
  <div class="conteudo-modal">
    <span class="fechar">&times;</span>
    <p>Esta é a resposta da pergunta.</p>
  </div>

</div>

1
  • Obrigado, é isso mesmo! Commented 9/10/2017 às 18:35

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .