div要素にオーバーレイを追加した後、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です。