html - 模态和 anchor 标记 href 错误

Question

我正在使用 bootstrap 4(我也尝试过使用 bootstrap 3)并且我认为我有一个错误的模式，因为当我在 anchor 标记 href 中添加一些东西时它会导致它崩溃，就像它的内容与我的 main 一样页面或它只是显示并消失了。这是我的模态和我的 anchor 标记外观(我的模态在我的 packages.php 中，而 anchor 标记在 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 驱动的点击时立即出现

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

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

---

怎么办？

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

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

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

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