3

我发生了一个非常奇怪的错误，我似乎无法弄清楚为什么。自 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>

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

4

3 回答 3

8

如果您有一个<button>内部表单，HTML 将该按钮解释为一个提交按钮。您的页面正在重新加载，因为该按钮实际上是在每次单击时提交表单。

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

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

于 2014-02-20T21:47:16.543 回答
1

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

于 2014-09-19T08:40:25.483 回答
0

我知道这是一年前的事情，但是我遇到了同样的问题，但是将其从 a 更改<button>为 an<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>
于 2016-01-07T20:56:35.190 回答