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的东西，不，
为一个基本错误大哭一场

我可以在代码段中与所有样式和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>

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

1 个答案: