HTML 表中的模态与 PHP

Question

我在 html 表中创建了一个模态，如果我单击 3 点图标，模态会弹出，但仅适用于表的第一条记录。 如果我单击第二条记录中的图标，则不会弹出模式。 我不知道有什么问题。 这是我的代码：

if ($count > 0) {
                while ($rows = mysqli_fetch_assoc($res)) {
                    $id = $rows['id'];
                    $workbook_vin = $rows['workbook_vin'];
                    $date_work = $rows['date_work'];
                    $user_full_name = $rows['user_full_name'];
                    $km = $rows['km'];
                    $work_hour = $rows['work_hour'];
                    $problem = $rows['problem'];
                    $remark = $rows['remark'];
        ?>

                    <div class="modal-container" id="modal-container">
                         <div class="modal">
                            <a href="<?php echo SITEURL; ?>/add-invoice.php?id=<?php echo $id; ?>"><button class="add-btn"><i class="fa-solid fa-file-invoice"></i></button></a>
                            <br><br><br>
                            <a href="<?php echo SITEURL; ?>/bill.php?id=<?php echo $id; ?>"><button class="add-btn"><i class="fa-solid fa-print"></i></button></a>
                            <br><br><br>
                            <a href="<?php echo SITEURL; ?>/images.php?id=<?php echo $id; ?>"><button class="add-btn"><i class="fa-solid fa-camera"></i></button></a>
                            <br><br><br>
                            <a href="<?php echo SITEURL; ?>/show-images.php?workbook_id=<?php echo $id; ?>"><button class="add-btn"><i class="fa-solid fa-image"></i></button></a>
                            <br><br>
                            <button id="close" class="danger-btn"><i class="fa-solid fa-circle-xmark"></i></button>
                        </div>
                    </div>

                    <tr>
                        <td><?php echo $sn++; ?></td>
                        <td><?php echo $workbook_vin; ?></td>
                        <td><?php echo $date_work; ?></td>
                        <td><?php echo $user_full_name; ?></td>
                        <td><?php echo $km; ?></td>
                        <td><?php echo $work_hour; ?></td>
                        <td><?php echo $problem; ?></td>
                        <td><?php echo $remark; ?></td>
                        <td>
                            <a href="<?php echo SITEURL; ?>/update-workbook.php?id=<?php echo $id; ?>"><button class="main-btn"><i class="fa fa-edit"></i></button></a>
                            <a href="<?php echo SITEURL; ?>/delete-workbook.php?id=<?php echo $id; ?>"><button class="danger-btn"><i class="fa fa-trash"></i></button></a>
                            <button id="open" class="add-btn" ><i class="fa-solid fa-ellipsis-vertical"></i></button>
                        </td>
                    </tr>

我将附上 2 张图片，看看它的外观和我的意思。

这是我的 JS 代码：

var open = document.getElementById("open");
var modalc = document.getElementsByClassName("modal-container");
var close = document.getElementById("close");

open.onclick = function (evt) {
  evt.preventDefault();
  modalc.classList.toggle("show");
 };

close.onclick = function (evt) {
   evt.preventDefault();
   modalc.classList.remove("show");
 };

Answer 1

这是不同记录的相同模态ID的问题。使模态ID动态化

代替-

<div class="modal-container" id="modal-container-{id}">

Answer 2

由于所有模式都具有相同的 id="modal-container"，因此您无法打开其他行的模式

你可以做这样的事情来创建不同的模态

<div class="modal-container" id="modal-container-<?php echo $id; ?>">

还必须提到按钮的相同模态ID以及每个模态/行的脚本。

另外的选择

您可以保留一个模式并在触发时更改数据

单个页面中的多个模态

Answer 3

EXayers 的评论和两个答案都是解决您问题的一部分。

首先，您需要确保模态容器的id是唯一的

<div class="modal-container" id="modal-container-<?= $id; ?>">

和三点按钮。

<button id="open-<?= $id; ?>" class="add-btn" ><i class="fa-solid fa-ellipsis-vertical"></i></button>

现在你必须重写你的 JS 代码来为所有打开的按钮添加（至少）一个打开的事件监听器。

对于关闭，您可以执行相同操作或遍历所有模式并在单击关闭按钮时删除 class。 或者你试试你的关闭按钮

 <button id="close-<?= $id; ?>" class="danger-btn" onclick="document.getElementsByClassName('modal-container-<?= $id?>')[0].classList.remove('show')">

---

如果您不愿意重写更多代码，您可以考虑Arslaan Shaikh 的想法，即只有一个模式并向其添加一些内容，据我所知，只有链接中的 id 发生了变化。

这将使您的代码更具可读性，并创建更少的 DOM 元素。

PS：模态的打开也可以通过内联JS来完成。 取决于你的喜好。