Início / coding / Perguntas / 78161583
Accepted
Dutchie432
Asked: 2024-03-14 23:18:57 +0800 CST

Bootstrap 5.3 Modal rolável com formulário no corpo e botão enviar no rodapé

  • 772

Estou tentando criar uma caixa de diálogo modal rolável com um formulário no modal-body . É um formulário longo, verticalmente, então eu gostaria de utilizar a seção modal-footer para abrigar o botão de envio, uma vez que ele permanece parado ao rolar o formulário/corpo.

Estou usando uma estrutura modal simples como esta:

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

O problema surge quando tento inserir as tags <form>e </form>. Se eu colocar <form>antes de modal-body e </form>depois de modal-footer , isso quebrará a natureza estática do rodapé, bem como a natureza rolável do corpo.

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

Entendo que poderia manter o próprio formulário contido em modal-body e usar um botão padrão fora do formulário para enviar o formulário via javascript, mas preferiria manter o botão dentro do formulário para que o formulário seja enviado quando enterfor pressionado .

Também tentei mover as tags do formulário ao redor da .modaldiv, ao redor da .modal-dialogdiv e ao redor da .modal-contentdiv e cada vez quebra o modal de uma maneira diferente.

Eu reconstruí esse problema aqui: https://codepen.io/JayblesG/pen/MWRjvOx

Alguém teve sucesso em realizar algo assim?

forms

1 respostas

  1. Best Answer

    Parece funcionar bem se você usar conteúdo modal como <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

    Dessa forma, você pode usar o botão de envio do formulário HTML.

    • 0

relate perguntas