当微调器出现在css/html中时，禁用或使窗体不可单击

我有

bootstrap

表单和

spinner

。当用户提交表单时显示微调器。它工作正常，微调器出现在表单顶部，但是，我不能使

表单

被禁用/

不可单击

，就像通常使用覆盖一样

form {
  position: relative;
  border: 1px solid red
}
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0.5;
  transform: translate(-50%, -50%);
}

<form method="post">
  <div class="overlay" id="loading" >
    <div class="d-flex justify-content-center">
      <div class="spinner-border" role="status" >
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="num">Enter number <span>?</span></label>
    <input id="num" type="text" class="form-control"/>
  </div>
  <button type="submit" class="btn btn-primary">Check </button>
</form>

表单{
位置：相对位置；
边框：1px纯红
}
.覆盖{
位置：绝对位置；
最高：50%；
左：50%；
不透明度：0.5；
转换：翻译（-50%，-50%）；
}
加载。。。
输入号码？
检查

我刚刚在.overlay div中添加了一个父div并对其进行了定位

希望这有帮助

表单{
位置：相对位置；
边框：1px纯红；
}
.覆盖容器{
位置：绝对位置；
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

加载。。。
输入号码？
检查

表单似乎是不可点击的，但是否也可以使用一些不透明度或某种视觉效果使其成为不可点击的表单？只需将背景：rgba（255、255、255、.5）添加到覆盖容器中，就可以了。