为什么页脚模式中的这个按钮不起作用？

Question

我在 bootstrap 4.0 模态中有一个表单，该模态有页眉、正文和页脚，我决定将 for="my-form-id" 用于表单外的按钮......但是......没有工作，我不知道我错过了什么。

我尝试过的事情（代码只是一个简短的例子）：

• for="my-form-id" 的事情

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">



      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form blahblah id="my-form-id" >
           ... things in form ...
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button for="my-form-id" class="btn btn-primary" >Save changes</button>
      </div>



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

• 不起作用，我试图扩展表单内的代码

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">

<form blahblah>

      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

           ... things in form ...

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" >Save changes</button>
      </div>

</form>

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

• js 的事情，没有

• 为一个基本的错误而哭泣

我可以在一个 sn-p 中与所有样式和 js 共享 codepen

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="v-alex" data-slug-hash="BXpEgp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Quote Modal ... WHY THE FOOTER BUTTON DOESNT WORK?!">
  <span>See the Pen <a href="https://codepen.io/v-alex/pen/BXpEgp/">
  Quote Modal ... WHY THE FOOTER BUTTON DOESNT WORK?!</a> by Alex (<a href="https://codepen.io/v-alex">@v-alex</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Answer 1

您是否尝试在按钮中添加表单 ID（即 form="my-form-id"）？

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" form="my-form-id">
  Launch demo modal
</button>