Custom jQuery Show function

Asked

Viewed 205 times

2

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

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

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>

jquery css

  • What effects? Enter your code too, otherwise it gets a little difficult to help you

  • You can show the HTML and CSS you are using?

  • I just did a test of what I thought would be the code, I’m going to post here, I just tried to put what I want to show inside an already modified div, but I can’t do it exactly as I’d like

  • I would like a transparent background that takes the whole screen and appears only this white div in the middle with the content, you click a question on the site and open this div with the answer.

  • 1

    Is this what you’re looking for ? https://answall.com/a/54072/129

  • That’s right, just change the background color now and the location of the X, thank you very much. If you can comment as an answer so I can vote as correct!

  • I updated the question with a photo that is more visible the style I look for, but this is just css I change here myself.

Show 2 more comments

1 answer

3


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

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

  • Thank you, that’s right!

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.