Question

40

How do I disable div elements after adding overlay on it?

rated 0 times [ 41] [ 1] / answers: 1 / hits: 8248 / 8 Years ago, fri, november 11, 2016, 12:00:00

I'm trying to put overlay on my form. Basically I don't want user to access the form and just block the content by adding overlay. I added overlay but I can still give inputs in input fields. How do I stop that?

.overlay {

  background: rgba(0, 0, 0, .75);

  text-align: center;

  opacity: 0;

  width: 100 %;

  height: 100 %;

  -webkit-transition: all 0.3s ease - in -out;

  -moz-transition: all 0.3s ease - in -out;

  -o-transition: all 0.3s ease - in -out;

  -ms-transition: all 0.3s ease - in -out;

  transition: all 0.3s ease - in -out;

  opacity: 1;

}

 <h1>Hello Plunker!</h1>

<div class=overlay>

  <input type=text>First name

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tierney

Add To Favorites

Follow

Total Points: 45

Total Questions: 101

Total Answers: 94

Location: Sudan

Member since Thu, May 7, 2020

4 Years ago

answered 8 Years ago charity · Accepted Answer

Like this?

.content {

  text-align: center;

  opacity: 0;

  width: 100%;

  height: 100%;

  position: relative;

  -webkit-transition: all 0.3s ease - in -out;

  -moz-transition: all 0.3s ease - in -out;

  -o-transition: all 0.3s ease - in -out;

  -ms-transition: all 0.3s ease - in -out;

  transition: all 0.3s ease - in -out;

  opacity: 1;

}



.overlay {

  background: rgba(0, 0, 0, .75);

  position: absolute;

  width: 100%;

  height: 100%;

}

<h1>Hello Plunker!</h1>

<div class=content>

  <div class=overlay>

  </div>

  

  <input type=text>First name

</div>

Hope this helps.