模态和锚标记href错误

Question

我正在使用 bootstrap 4（我也尝试使用 bootstrap 3）并且我认为我有一个错误的模式，因为当我在锚标记 href 中添加一些内容时，它会导致它崩溃，就像它的内容与我的主要内容一样页面或它只是显示并消失。这是我的模态和锚标记的外观（我的模态在我的 packages.php 中，而锚标记在 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>

packageclass.php

    public function GetAllData($getTbl){
    try{
        $query = $this->dbconn->prepare("SELECT * FROM tblpackages P JOIN tblpackageincluded I ON P.PackageID = I.PackageID JOIN tblrates R ON P.PackageID = R.PackageID");
        $query->execute();
        if($query->rowCount() > 0){
            while ($row = $query->fetch(PDO::FETCH_ASSOC)){
                if($getTbl == 1){
                    echo "<tr>";
                    echo "<td>". $row['PackageID'] ."</td>";
                    echo "<td><a href='DeletePackages.php?id=". $row['PackageID'] ."'><i class='fas fa-trash-alt'></i></a></td>";
                    echo "<td><a href='EditPackages.php?id=". $row['PackageID'] ."'><i class='fas fa-edit'></i></a></td>";
                    echo "<td>". $row['PackageName'] ."</td>";
                    echo "<td>". $row['PackageCost'] ."</td>";
                    echo "<td>". $row['PackNote'] ."</td>";
                    echo '<td> <a href="?id='. $row['PackageID'] .'" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-eye"></i></a></td>';
                    echo '<td> <a href="?id='. $row['PackageID'] .'" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-eye"></i></a></td>';
                    echo "</tr>";
                }
                else if($getTbl == 2){
                    echo "<tr>";
                    echo "<td>". $row['PackageIncID'] ."</td>";
                    echo "<td>". $row['PackIncluded'] ."</td>";
                    echo "</tr>";
                }
                else if($getTbl == 3){
                    echo "<td>". $row['RateID'] ."</td>";
                    echo "<td>". $row['RateCount'] ."</td>";
                    echo "<td>". $row['CostPerHead'] ."</td>";
                }
            }
        }
    }
    catch(PDOException $e){
        echo $e->getMessage();
    }
}

谢谢

模态框的图像在 1 秒后看起来像这样

Answer 1

你有冲突：

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

您已将锚设置为既显示模式，然后回发以检索可能具有以下效果的数据

• 关闭原始模态，
• 检索数据，
• 然后构建一个新的modal-body 表
• 在您单击锚点之前不会显示...这将重新开始该过程。

---

怎么办？

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

1. 回发和检索数据，填充模态体，然后在文档准备好时通过 js 自动显示模态。 -或-
2. 在客户端单击通过 ajax 检索数据并在模态显示事件期间填充动态表。

如果您使用回发选项，您可以像现在使用 PHP 一样执行所有操作。您需要从锚标记中删除模态显示并在 jquery 就绪函数或您喜欢的任何就绪方法中触发它。这不是一种非常干净的方法，但它是一种选择。

如果您选择客户端选项，您可能需要考虑使用第三方动态表插件。在我看来，这是与 Bootstrap 模态一起使用的更好选择。