如何将多步骤表单的preloader限制在表单容器区域内显示

解决方案 #

1. 调整HTML结构 #

将<div id="form-preloader-pagewrap">整个元素移动到<form>标签内部，放在</form>闭合标签之前即可，调整后核心结构如下：

<form>
  <!-- 原有表单内容：步骤模块、结果区域、按钮组全部保留不动 -->
  <div class="buttons">
    <button id="prev-btn" type="button">Previous</button>
    <button id="next-btn" type="button">Next</button>
    <button id="submit-btn" type="button">Submit</button>
  </div>

  <!-- 预加载器移到此处 -->
  <div id="form-preloader-pagewrap" class="hidden">
    <div id="form-preloader" class="show">
      <i class="fas fa-spinner fa-pulse fa-8x" style="color: #fff"></i>
    </div>
  </div>
</form>

2. 修改对应CSS规则 #

你之前的定位逻辑搞反了：要让子元素相对于父容器定位，需要给父容器设置position: relative，绝对定位的子元素才会以父容器为基准计算位置，修改两个CSS块即可：

form {
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid #1e1e1e;
  padding: 20px;
  min-height: 350px;
  /* 新增以下两行 */
  position: relative; /* 让form成为预加载器的定位父级 */
  overflow: hidden; /* 避免预加载器动画时超出表单边界 */
}

#form-preloader-pagewrap {
  width: 100%;
  height: 100%;
  z-index: 1000;
  position: absolute; /* 把fixed改成absolute，相对于父级form定位 */
  top: 0;
  left: 0;
  min-height: 350px;
  background-color: blueviolet;
}

其余CSS、JS代码无需修改，即可实现预加载器仅覆盖表单区域的效果。

内容的提问来源于stack exchange，提问作者DD1229