模态和锚标记href bug

时间:2018-06-12 12:10:19

标签: html css twitter-bootstrap bootstrap-modal

我正在使用bootstrap 4(我也尝试使用bootstrap 3),我认为我有一个错误的模式,因为当我在锚标记href中添加一些东西时,它会导致它崩溃,就像它的内容改变了一样我的主页或它只是显示和消失。这是我的模态和我的锚标签看起来(我的模态在我的packages.php中,而锚标签在packageclass.php中的函数内):

totals = df.sum()
df[totals[totals > 50].index]

packageclass.php

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

三江源

1秒后模态的图像看起来像这样 Modal After a second

1 个答案:

答案 0 :(得分:1)

你有冲突:

  1. <a>标记会导致回发。
  2. 由js
  3. 驱动的点击会立即显示模态

    您已设置锚点以显示模态,然后回发以检索可能具有

    效果的数据
    • 关闭原始模态,
    • 检索数据,
    • 然后构建一个新的modal-body
    • 不会显示,直到您点击锚点...再次启动该过程。

    怎么做?

    您需要删除冲突。你可以......

    1. 回发并检索数据,填充模态体,然后通过文件准备好的js自动显示模态。 -OR -
    2. 在客户端点击通过ajax检索数据并在模态显示事件期间填充动态表。
    3. 如果使用回发选项,您可以像使用PHP一样完成所有操作。您需要从锚标记中删除模态显示,并在jquery ready函数或您喜欢的任何现成方法中触发它。这不是一个非常干净的方法,但它是一种选择。

      如果选择“客户端”选项,则可能需要考虑第三方动态表加载项。在我看来,这是使用Bootstrap模式的更好选择。