主页 / coding / 问题 / 78161583
Accepted
Dutchie432
Asked: 2024-03-14 23:18:57 +0800 CST

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

  • 772

我正在尝试创建一个可滚动的模式对话框，其中包含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

1 个回答

  1. Best Answer

    如果您使用 modal-content 作为<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 表单提交按钮。

    • 0

相关问题