Question

单击图片时，我创建了一个“弹出窗口”对话框。对话框代码在此处加粗。在我的HTML代码中，我必须每次为每个人更改openModal2，openModal3等“openModal”。关于它如何在这里工作的任何想法？

$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循环和模态标识openModal重复，id在文档中必须是唯一的并打开正确的模态，只需指定行{{1两者，模态触发器和模态本身

模态触发链接

id

和模态

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

脚注：根据表更改<div id="openModal'.$row["rowid"].'" class="modalDialog"></div>的值以更正列名。

替代方式是通过Ajax方法，你可以在谷歌上找到很多例子或在SO上搜索。

Modal只显示一个人 - php mysql

1 个答案: