Css 将3.1模态引导到窗体中

我使用bootstrap3.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的一个bug，因为3.03版本没有这个问题

例如： 在这个例子中，我们看到模态是打开的，表单代码立即被提交

使用相同的示例，但使用引导版本2。模式已打开，请等待：

表单有很多输入。在这个表单中，我有几个按钮，对于每个按钮，我都有一个模式窗口供用户确认是否真的想要删除、复制、打印等

所以代码的结构不是模态的形式，而是包含几个模态的形式

你有解决办法吗

---

非常感谢

您必须将表单放入模式中

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

启动演示模式
&时代；
情态标题
...
接近
保存更改

我也有同样的问题。我发现，诀窍是将启动模态的“按钮”更改为“链接”，而不是按钮

&时代；
给你的故事一个标题！
输入标题：
保存故事

---

我正在使用模式提交表单，所以我将

保存故事

按钮保留为一个按钮，这样它就可以提交了。我想如果你不想提交的话，你可能不得不修改它

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

启动演示模式

在您的示例中，我没有看到页面被提交。它很好用。请再次检查。实际上，您真正的问题是

按钮

s具有默认的

类型

，即

提交

。您可以通过简单地设置按钮的

type=“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>

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