Início / user-83809

Dutchie432's questions

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

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