主页 / user-83809

Dutchie432's questions

Martin Hope
Dutchie432
Asked: 2024-03-14 23:18:57 +0800 CST
  • 5

我正在尝试创建一个可滚动的模式对话框，其中包含modal-body中的表单。它是一个长表单，垂直，所以我想利用模态页脚部分来容纳提交按钮，因为它在滚动表单/正文时保持静止。

我正在使用像这样的直接模态结构：

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">

      <div class="modal-body">
        ... FORM CONTENT ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Understood</button>
      </div>

    </div>
  </div>
</div>

当我尝试插入<form>和</form>标签时，问题就出现了。如果我放在modal-body<form>之前并放在modal-footer之后，它会破坏页脚的静态性质以及正文的可滚动性质。</form>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">

      <form action=".....">
        <div class="modal-body">
          ... FORM CONTENT ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Understood</button>
        </div>
      </form>

    </div>
  </div>
</div>

我知道我可以将表单本身包含在模态主体中，并在表单外部使用标准按钮，以便通过 JavaScript 提交表单，但我更愿意将按钮保留在表单内部，以便按下时表单会enter提交。

.modal我还尝试过在div 周围、.modal-dialogdiv 周围和 div 周围移动表单标签.modal-content，每次它都会以不同的方式破坏模式。

我在这里重建了这个问题：https ://codepen.io/JayblesG/pen/MWRjvOx

有没有人成功地完成过这样的事情？

forms