Bootstrap 5.3 可滚动模态，正文中有表单，页脚有提交按钮

Question

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

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

<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>

标签时，问题就出现了。如果我将

<form>

放在 modal-body 之前，并将

</form>

放在 modal-footer 之后，它会破坏页脚的静态特性以及正文的可滚动特性。

<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>

我知道我可以将表单本身包含在 modal-body 中，并使用表单外部的标准按钮以便通过 JavaScript 提交表单，但我更愿意将按钮保留在表单内，以便表单提交当按下

enter

时。

我还尝试过在

.modal

div 周围、在

.modal-dialog

div 周围和

.modal-content

div 周围移动表单标签，并且每次都会以不同的方式打破模式。

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

有人成功完成类似的事情吗？

Answer 1

如果您使用模态内容作为

<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">
        <form class="modal-content" action="/echo" method="POST">
            <div class="modal-header bg-secondary fs-5" id="staticBackdropLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
                    <label for="floatingInput">Email address</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                    <label for="floatingPassword">Password</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
                    <label for="floatingInput">Email address</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                    <label for="floatingPassword">Password</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
                    <label for="floatingInput">Email address</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                    <label for="floatingPassword">Password</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
                    <label for="floatingInput">Email address</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                    <label for="floatingPassword">Password</label>
                </div>
            </div>
            <div class="modal-footer bg-secondary">
                <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>

https://codeply.com/p/qFI1p5Dh27

这样您就可以使用 HTML 表单提交按钮。