Bootstrap 3模式重定向页面打开

Question

我发生了一个非常奇怪的错误，我似乎无法弄清楚原因。自 Bootstrap 发布以来，我一直在使用它，并且非常熟悉它的工作原理。我已经设置了一个带有按钮的表单，这些按钮可以触发位于文档底部的模式。当您单击触发模式的按钮时，它会打开模式，但会刷新将表单元素/值附加到 URL 的页面，就好像它正在使用 GET 方法提交表单一样。刷新页面时，模式不再打开，并且 URL 具有查询中的所有表单值。我一生都无法弄清楚为什么会这样。模态应该打开并且页面应该保持不受影响（除了模态打开）

以下是表单元素和模式按钮的 HTML：

<div class='form-group'>
    <label class='control-label' for='store-name'>
        Store Name:
    </label>
    <div class='controls'>
        <input type='text' class='form-control' id='store-name' name='store-name'>
        <button class='btn btn-default' data-toggle='modal' data-target="#storeName">Lookup</button>
    </div>
</div>  

这是模态本身的 HTML：

<!-- Store Name Modal -->
<div class="modal fade" id="storeName" tabindex="-1" role="dialog" aria-labelledby="storeName" 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">Stores</h4>
            </div>
            <div class="modal-body">
                <!-- Modal Content -->  
            </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</button>
            </div>
        </div>
    </div>
</div>

所有脚本/样式都包括在内，因为模态实际上是打开的，它只是在打开时重定向页面。有没有人遇到过这样的错误或知道是什么原因造成的？

Answer 1

如果表单中有<button>，HTML 会将该按钮解释为提交按钮。您的页面正在重新加载，因为该按钮本质上是在每次单击时提交表单。

解决此问题的第一个选项是创建一个函数来捕获事件，然后阻止它提交。如果您在 from 中有多个按钮，这可能会让人头疼。

从 Bootstrap 的角度来看，最简单的事情是将 <button class='btn'> 更改为 <a class='btn'>。 Bootstrap 以相同的方式对它们进行样式设置，因此您可以互换使用它们。这里的好处是当你点击一个锚标签时它不会提交你的表单。

Answer 2

对于语义而言，继续使用<button> 标记并将type 属性更改为"button" 可能会更好，因为如果未指定，它默认为"submit"。

Answer 3

我知道这是一年前的事情，但我遇到了同样的问题，但是将其从 <button> 更改为 <a> 并没有帮助。

另外从 Javascript 我不能调用 $('#USPSModal').modal('show'); 因为它说它不是一个函数。

奇怪的是，如果我放置两个具有不同 ID 的模态 div，第二个总是有效，但第一个永远不会。

这是我目前所拥有的。我把它放在我的表单标签和我的 UpdatePanel 里面，我在 UpdatePanel 外面和 Form 标签外面试过，但得到了相同的结果。它始终导航页面而不是显示模式窗口。

<a class="btn btn-info btn-lg" data-toggle="modal" data-target="#USPSModal">Open Modal</a>

  <!-- Modal -->
  <div id="USPSModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">USPS Address Check</h4>
        </div>
        <div class="modal-body">
          <div>
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-6">
                  <asp:Label ID="LabelUserEnteredAddress" runat="server" />
                </div>
                <div class="col-md-6">
                  <asp:Label ID="LabelUSPSAddress" runat="server" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>