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??
-
2Seja 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.– WossCommented 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– RickParizCommented 12/07/2017 às 2:48
Adicione um comentário
|
1 Resposta
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.
-
-
-
-
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 Commented 1/08/2017 às 20:54