Php 列表中每个元素上的弹出模式

最近，我一直在尝试在列表的每个元素上弹出一个模式。该列表来自MySQL数据库，代码如下：

<?php
$page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
$cadenaSQL = "SELECT idPedido, fecha, fechaActual, nombre, apellido1, apellido2, telefono, email, productos, mensaje, aprobado
    FROM pedido
    WHERE borrado = 0
    ORDER BY -fecha";
$limit = 10;
$page = validatepage($mysqli,$cadenaSQL,$limit,$page);
$startpoint = ($page * $limit) - $limit;

$res= $mysqli->query($cadenaSQL." LIMIT {$startpoint} , {$limit}"); 
?>

上面的大部分代码来自一个php类，该类具有与数据库相关的函数，因此从那里调用它们

它用以下html php代码显示在一个列表上，与数据库的几乎每个字段相关，首先将其发布在显示宽度的列上，然后用每个条目的值生成每一行：

<table class="table table-hover">
                                <thead>
                                    <tr>
                                    <th scope="col"  style="width:8%" class="num-pedido">NºPedido</th>
                                    <th scope="col"  style="width:10%" class="fecha">Fecha</th>
                                    <th scope="col"  style="width:15%" class="nombre-completo">Nombre</th>
                                    <th scope="col"  style="width:12%" class="telefono">Teléfono</th>
                                    <th scope="col"  style="width:15%" class="email">Email</th>
                                    <th scope="col"  style="width:20%" class="productos">Productos</th>
                                    <th scope="col"  style="width:10%" class="aprobado">Aceptado</th>
                                    <th scope="col"  style="width:10%" class="accion">Acción</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <?php
                                        while($row=mysqli_fetch_array($res)){
                                            $idPedido = $row['idPedido'];
                                            $id = "P".str_pad($idPedido, 8, "0", STR_PAD_LEFT);
                                            $fecha = $row['fecha'];
                                            $fechaActual = $row['fechaActual'];;
                                            $nombre = $row['nombre'];
                                            $apellido1 = $row['apellido1'];
                                            $apellido2 = $row['apellido2'];
                                            $telefono = $row['telefono'];
                                            $email = $row['email'];
                                            $productos = $row['productos'];
                                            $aprobado = $row['aprobado'].'';
                                            $mensaje = $row['mensaje'];
                                            $nombrecompleto = $nombre." ".$apellido1." ".$apellido2;

                                    ?>
                                    <tr class="tabla-fila" <?php if($aprobado==1){echo "style='background:#afd5a2'";}?>>                                          
                                        <td data-label="Nº Pedido">           
                                            <a>
                                                <div class="num-pedido" ><div id="myModalBtn"><?=$id?></div></div>
                                            </a>
                                        </td>                                          
                                        <td data-label="Fecha">
                                            <div class="fecha"><?=$fecha?></div>
                                        </td>
                                        <td data-label="Nombre">
                                            <div class="nombre-completo-pedido"><?=$nombrecompleto?></div>
                                        </td>
                                        <td data-label="Telefono">
                                            <div class="telefono"><?=$telefono?></div>
                                        </td>
                                        <td data-label="Email">
                                            <div class="email-pedido"><?=$email?></div>
                                        </td>
                                        <td data-label="Productos">
                                            <div class="productos"><?=$productos?></div>
                                        </td>
                                        <td data-label="Aceptado">
                                            <div class="aprobado"><?php if($aprobado==0){
                                                echo "NO";
                                            }else{
                                                echo "SI";
                                            }?></div>
                                        </td>
                                        <td data-label="Acción">
                                            <div class="accion">
                                                    <span class="ti-check" id='<?=$idPedido?>' data-id="<?= $idPedido ?>"></span>
                                                    <span class="ti-trash" id='<?=$idPedido?>' data-id='<?= $idPedido ?>'></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <?php } ?>
                                </tbody>
                            </table>

佩蒂多
德国福查
名义
特莱福诺酒店
电子邮件
产品
阿塞普塔多
阿克松

当我尝试用“myModalBtn”调用模型时，问题就出现了（我将在几行之后发布代码），因为它只显示数据库的最后一个条目。代码如下：

<div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <div class=>
                        <button class="close">&times;</button>
                    </div>
                    <?php sectionbradcam('Detalles del pedido');?> 
                    <section class="subcaja-central">
                        <div id = "central" class="container">
                            <div class="area-contenido">
                                <p><br>
                                Id Pedido: <?=$id?><br>
                                Fecha solicitada: <?=$fecha?><br>
                                Fecha de la solicitud: <?=$fechaActual?><br>
                                Nombre completo: <?=$nombrecompleto?><br>
                                Teléfono: <?=$telefono?><br>
                                Email: <?=$email?><br>
                                Productos: <?=$productos?><br>
                                Mensaje: <?=$mensaje?><br>
                                </p>
                            </div>
                        </div>
                    </section>
                </div>
            </div>

&时代；


Id Pedido:

费查·拉科塔达：

费查·德拉科鲁德：

名词复数：

电话号码：

电子邮件：

产品：

门萨耶：

还调用json以生成模式弹出窗口：

// Get the modal

var modal = document.getElementById("myModal");

// Get the button that opens the modal

var btn = document.getElementById("myModalBtn");

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal

btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal

span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

//获取模式
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myModalBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

我怎样才能在上面提到的清单的每一项上都做到呢？我如何将列表中的每一条通道指向数据库中的信息

---

提前感谢所有能够帮助我的人。

请向我们展示所有相关代码，而不仅仅是一些片段。我们需要查看上下文以及信息如何从数据库一直流到输出，否则我们就不会知道发生了什么。哦，好的，对不起，我是新手，让我用从数据库到输出的每一段代码来编辑它