How to leave one page transparent over another? with php [closed]

Question

How to leave one page transparent over another? with php [closed]

Navigation

#1 by (1 votes)

0

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

html5 css

asked by anonymous 07.07.2017 / 20:32

1 answer

Add a blog to a site already built in WP [closed] An Activity for each action or several actions in the same Activity?

score 1 · Accepted Answer

Simple friend, you just create a div that will load 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údoNormal<buttonid="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 .loader class, which makes the content 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 have helped.