模态仅显示一个人-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

使用当前方法，在循环内有模态，而循环模态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上搜索。