Question

我使用Bootstrap 3.1

我将模态转换成表格有问题...

如果我将我的模态代码放入如下形式：

<form class="form-horizontal" action="pro_dossier_location_maj.php" role="form" method="post">

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
  </div>
  </div>
</div>

</form>

我的问题：如果我点击模态按钮，会打开模态，但表格会立即提交！

我认为这是Bootstrap新版本3.1的一个错误，因为我没有3.03版本的这个问题。

一个例子： http://jsbin.com/icObUHIT/1/ 在这个例子中，我们看到模态是打开的，并立即提交表单代码。

使用相同的示例但使用Bootstrap版本2.模态已打开并等待： http://jsbin.com/icObUHIT/2/

表单有很多输入。在这种形式我有几个按钮，每个按钮我有模态窗口，用户确认他是否真的想要删除，复制，打印等......

所以代码的结构不是一个模态的形式，而是一个内部有多个模态的形式。

你有解决方案吗？

非常感谢

Answer 1

您必须将表单放在模态中。

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
             </div>
             <div class="modal-body">
                  <form class="form-horizontal" action="pro_dossier_location_maj.php" role="form" method="post">
                      ...
                  </form>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
     </div>
</div>

Answer 2

我遇到了同样的问题。我找到的诀窍是改变启动模态的“按钮”为“链接”而不是按钮<a href...> vs <button...>以下是我找到的解决方案：

<form ..... >

     <!-- Button trigger modal -->
    <a href="#myModal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     Open Modal
    </a>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Give your story a title!</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for="title">Enter Title:</label>
              <input type="type" class="form-control" id="title" name="title" placeholder="Story Title">
            </div>
          </div>
          <div class="modal-footer">
            <!--button type="button" class="btn btn-default" data-dismiss="modal">Close</button-->
            <button type="button" class="btn btn-primary">Save Story</button>
          </div>
        </div>
      </div>
    </div>

</form>

我正在使用模式提交表单，因此我将save story按钮保留为按钮，因此它会提交。我想如果你不想让它提交，你可能需要改变它。

Answer 3

问题是打开模态的按钮必须是type =“button”

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

bootstrap 3.1模态到表单

3 个答案: