Show jQuery Custom Function [duplicate]

Question

Show jQuery Custom Function [duplicate]

Navigation

#1 by (3 votes)

2

I would like to know how to add "effects" to show and hide, I tried adding it to my code but I did not succeed. I tried to show only a common div with class in css that gave the appearance that the image below has, but it stays behind other elements, it does not stay on the whole screen as it has to be.

When I say effect I mean a transparent background that takes the whole screen and only appears this white div in the middle with the content, you click on a question on the site and open this div with the answer

<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>

jquery css

asked by anonymous 09.10.2017 / 19:35

1 answer

Array Processing Date Comparison - PHP [duplicate]

score 3 · Accepted Answer

What you want is a modal. You could use the Bootstrap or JQueryUI modals, but if you want to make your own, see this example I did:

$(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,podeserqualquerelemento<span>,<a>,<p>,etc...--><ahref="#" 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>