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"。 / p>

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>

Bootstrap 3模态重定向页面打开

3 个答案: