cover element

Cover element allowing user events

by jpeter06

HTML

<div class="aa desactivado">
AA
</div>

<div class="bb desactivado">
BB
</div>
<div class="cc" onclick="toggleCarga('cc')">
CC <button onclick="toggleClass('cc')">
toggle
</button>
</div>

<div class="inline desactivado">
  <textArea class="desactivado">
    Patattas fritas
  </textArea>
</div>

CSS

html, body{
  width:100%; height:100%; margin:0px;padding:0px;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
}
.aa , .cc{
  background:red;
  height:100px;
  width:40%;
  position:relative;
}

.bb{
  background:green;
  width:60%;
  height:200px;
  position:relative;
}

textarea{position:relative; width:50vw; height:40vh;}

.inline { display:inline-block; 
      position:relative; 
      background:tan; 
      padding:5px;
}
      
.desactivado:after {
  position:absolute;
  top:0px;
  left:0px;
  content: "";
  display: block;
  background:repeating-linear-gradient(
  45deg,
  #eeeeeeaa,
  #eeeeeeaa 10px,
  #ddddddaa 10px,
  #ddddddaa 20px
);
  width: 100%;
  height: 100%;
  z-index:2;
}

JavaScript

function toggleCarga(clase){
	document.getElementsByClassName(clase)[0].classList.toggle("desactivado")
}