如何使用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封电子邮件看起来正常，并且模式打开也像正常一样（虽然未显示正确的内容，但这是另一个问题！），但是第二封电子邮件始终卡在显示的下方，并且不会隐藏。 我将尝试粘贴屏幕截图

外观图片

外观如何，但包含更多电子邮件，并且明显带有内容的模式

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>