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

试试这个

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

public class EntityA
{
    public Guid Id { get; set; }
    public string Desc { get; set; }

    public EntityB EntityB { get; set; }
}

public class EntityB
{
    public Guid Id { get; set; }
    public Guid EntityAId { get; set; }
    public EntityA EntityA { get; set; }
}

Answer 2

喜欢这个吗？

＆＃13;

.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%;
}

＆＃13;

<h1>Hello Plunker!</h1>
<div class="content">
  <div class="overlay">
  </div>
  
  <input type="text">First name
</div>

＆＃13;

希望这有帮助。

Answer 3

非常简单＆amp;有效的方式，没有额外的＆amp;不必要的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。

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

3 个答案: