How to make one page transparent above another? com php

Asked

Viewed 282 times

0

I would like you to help me get a transparent screen above another... like, when he clicks on the button this new screen will appear and will leave the background transparent, but still with the other page below.. how do I do that??

css html5
  • 2

    Welcome to [pt.so]. A good practice to start a healthy discussion is to do the [tour] if you haven’t already done it, and read the [Ask] guide. Start by following these recommendations, especially knowing what types of questions to ask, how to create a minimal example that is complete and verifiable, and even what to do when someone answers you.

  • If my answer has helped you, and is correct, please put it as a solution to your question

1 answer

1


Simple friend, just you create a div that will be loaded over all content, these things are well used with loads. Let me give you an example:

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

Just worry about the class .loader, she who makes the contents stay on top of each other:

.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%;
}

This creates a transparent background with a content on top.

I hope I’ve helped.

  • Yes. Yes. Thank you.

  • If possible, mark this answer with the right one.

  • I’m new at this;... I don’t know how to do it... sorry

  • In my answer, will have an icon right, just click on it, is below the place where you give points to answer, which currently has 1 point

Browser other questions tagged css html5

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