php - 模态只显示一个人 - php mysql

Question

当单击图片时，我制作了一个“弹出”对话框。此处的对话框代码以粗体显示。在我的 HTML 代码中，我每次都必须将每个人的“openModal”更改为 openModal2、openModal3 等。关于它在这里如何运作有什么想法吗？

$sql = "SELECT * FROM person2";

if ($result = mysqli_query($connection, $sql)) {    
    // loop through the data
    //create 4 columns for the table
    $columns=4;
    $i = 0;
    while($row = mysqli_fetch_assoc($result)){
        // the % operator gives the remainder of a division of two values
        // in this case, 0/4, this tells the table row to jump to a new row
        // if there are already 4 columns in one row
        if($i % $columns == 0){

                   //begin table row
                   echo "<tr>";
        }

         echo '<td class="staffImage badgeText frameImage displayInLine">
                <a href=#openModal><img src="images/staff/'.$row["imgName"].'.jpg"></a><br> 
                <strong>'.$row["firstName"].'</strong>
                <strong>'.$row["lastName"].'</strong><br>
                **<div id="openModal" class="modalDialog">
                    <div>
                               <a href="#close" title="Close" class="close">X</a>
                               <h2>' . $row["firstName"] .
                               $row["lastName"].'</h2><br>
                               <img class="floatLeft" src="images/staff/'.$row["imgName"] .'.jpg">
                               <p><strong>Hire Date:</strong>'.$row["hireDate"].'<br>
                               <p><strong>Major:</strong>'.$row["major"];

                                          //if the field "major2" (Double Major) is not null, display it
                             if($row["major2"] != NULL)
                             {
                               echo ' & '.$row["major2"].'<br>';
                             }

                             //if the field "minor" is not null, display it
                             if($row["minor"] != NULL)
                             {
                               echo '<br> Minor: '.$row["minor"].'<br>';
                             }

                                           //if the field "concentration" is not null, display it 
                             if($row["concentration"] != NULL)
                             {
                               echo '<br> Concentration: '.$row["concentration"].'<br>';
                             }

                    '</div>
                </div>
                <br><strong>'.$row["firstName"].'</strong>
                </div> ';**
            //end <td>       
        echo '</td>';

Answer 1

使用您当前的方法，您在 while 循环内有模态，并且模态 id openModal 正在重复，id 在整个文档中必须是唯一的，要打开正确的模态，只需分配行 id 模态触发器和模态本身

模态触发链接

<a href="#openModal'.$row["rowid"].'"><img src="images/staff/'.$row["imgName"].'.jpg"></a>

和模态

<div id="openModal'.$row["rowid"].'" class="modalDialog"></div>

脚注:更改 $row["rowid"] 的值以根据表更正列名称。

另一种方法是通过 Ajax 方法，您可以在 google 上找到很多示例或在 SO 上搜索。