如何使用 PHP 和 MySQL 创建多个 javascript 模式框？

Question

我正在创建一个员工门户，员工门户的一部分是有一个简单的邮件系统供员工之间使用，并让系统向员工发送电子邮件。

我希望它的工作方式是列出所有电子邮件，未阅读的电子邮件将以粗体显示，已阅读的电子邮件不会以粗体显示。电子邮件将全部放在一个表格中并根据需要进行排序，然后在最右侧会有一个显示“打开消息”的按钮，当用户单击它时，我希望它打开一个带有完整消息的模式框以及回复的选项和所有这些东西。我在 1 封电子邮件上跟踪它，它工作得很好，看起来很棒，然后当我添加更多电子邮件时问题就开始了。我认为下面的解决方案会起作用，通过使用邮件 ID 重命名模式框，我认为这会使其独一无二并允许我拥有超过 1 个，但我也需要从模式框中的电子邮件中获取数据，我认为它可以在 foreach 循环中工作的另一个原因。但是它根本不起作用。

        <table>
                  <tr>
                    <th>Sender</th>
                    <th>Subject</th>
                    <th>Status</th>
                    <th></th>
                  </tr>
                  <?php
                    foreach($mailResult as $mailRow) {
                      //Use Mail ID to retrieve the User who sent the original message
                      $mailUserSTMT = "SELECT `user_details_id`, `user_details_first_name`, `user_details_last_name` FROM `user_details` WHERE `user_details_id` IN (SELECT `user_mail_id` FROM `user_mail` WHERE user_details_id = :id)";

                      $fetchList = $dbh->prepare($mailUserSTMT);
                      $fetchList->bindValue(':id', $mailRow['user_mail_id']);
                      $fetchList->execute();
                      $mailUserRow = $fetchList->fetch(PDO::FETCH_ASSOC);
                      $mailFromFullName = $mailUserRow['user_details_first_name']." ".$mailUserRow['user_details_last_name'];
                      $mail_id = $mailRow['user_mail_id'];
                      $btn = "popup".$mail_id;
                      $mod = "mod".$mail_id;
                      $modClose = "close".$mail_id;
                      if ($mailRow['user_mail_opened'] == "no") { $mailWeight = "bold"; } else { $mailWeight = "normal"; }
                      $mailStatus = ucfirst($mailRow['user_mail_status']);
                      echo "<tr style='word-wrap: break-word; text-align:center;''>";
                        echo "<td><p style='font-weight: ".$mailWeight.";'>".$mailFromFullName."</p></td>";
                        echo "<td><p style='font-weight: ".$mailWeight.";'>".$mailRow['user_mail_subject']."</p></td>";
                        echo "<td style='color:".$mailStatus."'><p style='font-weight: ".$mailWeight.";'>".$mailStatus."</p></td>";
                        echo "<td><button style='font-weight: ".$mailWeight.";' id='".$btn."'>Open Message</button></td>";
                      echo "</tr>";

                      ?>
                      <!-- The Modal -->
                      <div id="<?php echo $mod; ?>" class="modal">

                        <!-- Modal content -->
                        <div class="modal-content">
                          <span class="<?php echo $modClose; ?>">&times;</span>
                          <h4><b>From: </b><?= $mailFromFullName; ?></h4>
                          <p><b>Sent: </b><?= $mailRow['user_mail_timestamp']; ?></p>
                          <hr>
                          <table>
                            <tr>
                              <td><h5>Subject: <?= $mailRow['user_mail_subject']; ?></h5></td>
                            </tr>
                            <tr>
                                 <td style='color:".$mailStatus."'>Urgency: <p style='font-weight: ".$mailWeight.";'>".$mailStatus."</p></td>
                            </tr>
                          </table>
                          <p><?= $mailRow['user_mail_message']; ?></p>
                        </div>

                      </div>
                      <script>
                      // Get the modal
                      var modal = document.getElementById("<?php echo $mod; ?>");

                      // Get the button that opens the modal
                      var btn = document.getElementById("<?php echo $btn; ?>");

                      // Get the <span> element that closes the modal
                      var span = document.getElementsByClassName("<?php echo $modClose; ?>")[0];

                      // When the user clicks 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";
                        }
                      }
                      </script>
                      <?php
                    }
                  ?>
                </table>

1 封电子邮件现在看起来很正常，并且模式打开也正常（虽然没有显示正确的内容，但这是另一个问题！），但第二封电子邮件一直卡在显示下方，不会隐藏。我会尝试粘贴它的截图

Image of how it looks

How it should look but with more emails and obviously the modal with content

Answer 1

我设法通过查看 CodePen.io 找到了答案，发现有人做了类似的事情，所以我使用它并坚持原来的唯一方法，因为我原来的 $mod 是唯一的，因为每个字段都有不同的 ID。

你可以在这里找到我使用的方法：

https://codepen.io/JackZelig/pen/VPdQXJ

<p>
  <button class="button" data-modal="modalOne">
    Contact Us
  </button>
</p>
<p>
  <button class="button" data-modal="modalTwo">
    Send Us Hate Mail
  </button>
</p>

<div id="modalOne" class="modal">
  <div class="modal-content">
    <div class="contact-form">
      <a class="close">&times;</a>
      <h2>Ask A Question</h2><br>
    </div>
  </div>
</div>

<div id="modalTwo" class="modal">
  <div class="modal-content">
    <div class="contact-form">
      <span class="close">&times;</span>
      <h2>Haters Gonna Hate</h2><br>
    </div>
  </div>
</div>