添加叠加层后，如何禁用div元素？

Question

我试图在我的表格上叠加覆盖。基本上我不希望用户访问表单，只是通过添加覆盖来阻止内容。我添加了叠加，但我仍然可以在输入字段中输入。我如何阻止？

.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>

Answer 1

喜欢这个？

.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>

希望这有助于。

Answer 2

尝试伪类后使用::这个

.wrapper { 
 
    position: relative; 
 
} 
 
.overlay{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.form-wrapper { 
 
    text-align: center 
 
}

<div class="wrapper"> 
 
    <div class="overlay"></div> 
 
    <div class="form-wrapper"> 
 
    <input type="text">First name 
 
    </div> 
 
</div>

Answer 3

一个非常简单的&高效这样做，无需额外&不必要的div的方式。 它使分层非常容易。

HTML

<div class="form"> 
    First name 
    <input type="text"> 
</div> 

CSS

.form{ 
width:300px; /*Or what ever width you choose*/ 
height:400px;  /*Or what ever height you choose*/ 
position: relative; 
z-index:1; 
} 

.form:after{ 
position:absolute; 
height: 100%; 
width:100%; 
content:''; 
z-index:5; /* Make sure this value is higher than the .form class */ 
top:0; 
left:0; 
} 

这是应该做的吧:) 这里是一个工作演示一个fiddle。