0

eu gostaria que me ajudassem a conseguir deixar uma tela transparente acima de outra... tipo, quando ele clicar no botão essa nova tela aparecerá e deixará o fundo transparente, mas ainda com a outra pagina abaixo.. como faço isso??

2
  • 2
    Seja bem-vindo ao Stack Overflow em Português. Uma boa prática para iniciarmos uma discussão saudável é fazer o tour, caso ainda não tenha feito, e ler o guia de Como perguntar. Comece seguindo estas recomendações, principalmente sabendo quais os tipos de perguntas deve fazer, como criar um exemplo mínimo que seja completo e verificável e até mesmo o que fazer quando alguém te responder.
    – Woss
    Commented 7/07/2017 às 18:43
  • Se a minha resposta te ajudou, e está correta, por favor, coloque-a como solução para a a sua pergunta
    – RickPariz
    Commented 12/07/2017 às 2:48

1 Resposta 1

1

Simples amigo, basta você criar uma div que será carregada por cima de todo conteúdo, essas coisas são bem usadas com loads. Vou dar um exemplo:

$(document).ready(function() {
    $(".loader").hide();
    $("#btn").click(function(){
      $(".loader").show();
  });
});
.loader {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  background: rgba(238, 112, 64, 0.34);
  display: table;
  width: 100%;
  z-index: 10000;
  height: 100%;
}

.loader-content{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.sk-cube-grid {
  width: 75px;
  height: 75px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #333;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Conteúdo Normal
<button id="btn"> clique </button>
<div class="loader">
	<div class="loader-content">
		<div class="sk-cube-grid">
		  <div class="sk-cube sk-cube1"></div>
		  <div class="sk-cube sk-cube2"></div>
		  <div class="sk-cube sk-cube3"></div>
		  <div class="sk-cube sk-cube4"></div>
		  <div class="sk-cube sk-cube5"></div>
		  <div class="sk-cube sk-cube6"></div>
		  <div class="sk-cube sk-cube7"></div>
		  <div class="sk-cube sk-cube8"></div>
		  <div class="sk-cube sk-cube9"></div>
		</div>
	</div>
</div>

Apenas se preocupe com a classe .loader, ela que faz o conteúdo ficar em cima do outro:

.loader {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  background: rgba(238, 112, 64, 0.34);
  display: table;
  width: 100%;
  z-index: 10000;
  height: 100%;
}

Com isto se cria um fundo transparente, com um conteúdo em cima.

Espero ter ajudado.

4
  • Sim .. ajudou sim.. Obrigadaa
    – Alis
    Commented 27/07/2017 às 20:47
  • Se possível, marque essa resposta com a certa.
    – RickPariz
    Commented 27/07/2017 às 23:46
  • Sou nova nisso;... não sei como se faz... desculpe
    – Alis
    Commented 1/08/2017 às 20:45
  • Na minha resposta, vai ter um ícone de certo, só clicar nele, fica em baixo do lugar onde se dá pontos pra resposta, que atualmente está com 1 ponto
    – RickPariz
    Commented 1/08/2017 às 20:54

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