Question

我是php的新手，但有此问题。首先，我确实使用表中的select和while循环显示了输入的消息。然后，我想要一个可以通过单击显示模式的按钮来获取所选行的名称或ID的功能。问题是只有第一行显示了模态。其余行不显示。我已经搜索了答案，发现模态使用相同的ID来显示。我仍然是一名学生，对代码混乱感到抱歉。 ` 收件箱

    while (($row = mysqli_fetch_array($query))) {
    $idd = $row['id'];
    $content = $row['content'];
    $content_msg = $row['content_msg'];
    $to_msg = $row['to_msg'];
    $date_created = $row['date_created'];
    $from_msg = $row['from_msg'];

    $query1 = mysqli_query($db, "SELECT profile_pic FROM users WHERE 
    first_name = '$from_msg' ")
    or die (mysqli_error($db)); 
    while ($rows = mysqli_fetch_array($query1)) {
    $pic = $rows['profile_pic'];


    echo "
    <table id = 'tbl_inbox' border = '0'>
    <tr>
    <td rowspan = '9' width = '90px'>
    <center> <img src = '$pic' width = '80px' height = '80px' id = 
    'inbox_pic'> </center>
     </td>
     <td class = 'td_name' colspan = '4'>
     <b>$from_msg</b>
     </td>

     <td id = 'td_date'>
     <b>$date_created</b>
     </td>
     </tr>

     <tr>
     <td rowspan = '3' colspan = '5' id = 'td_msg'>
     $content_msg
     </td>
     </tr>

     <tr>
     </tr>

     <tr>
     </tr>
     <tr>
     <!-- This is the looped button 
     <td colspan = '5' id = 'td_action'>  <button id ='reply$idd' name = 
     'btn' value = 'reply$idd'> $idd </button> </td>

     </tr>
     </table>


     ";

     //
      ?>

      <div id="myModal<?php echo $idd; ?>" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
      <div class="modal-header">
      <span class="close">×</span>
      <h2>This is modal ID <?php echo $idd; ?></h2>
      </div>
      <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      </div>
      <div class="modal-footer">
      <h3>Modal Footer</h3>
      </div>
      </div>

      </div>

      <script>
      // Get the modal
      var modal<?php echo $idd; ?> = document.getElementById('myModal<? 
      php echo $idd; ?>');

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

      // When the user clicks the button, open the modal 
      btn<?php echo $idd; ?>.onclick = function() {
      modal<?php echo $idd; ?>.style.display = "block";
      }

      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
      if (event.target == modal<?php echo $idd; ?>) {
      modal<?php echo $idd; ?>.style.display = "none";
      }
      }
      </script>

      <?php
      }}
      ?>

      <script>
      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName("close")[0];

      // When the user clicks on <span> (x), close the modal
      span.onclick = function() {
      modal.style.display = "none";
      }
      </script>
      `

Answer 1

第一件事..为什么每次运行while循环时都要创建一个<table>？

但是我认为您遇到的问题是由于您尝试切换模态的方式引起的。

每个项目都具有一个Modal Toggle功能，但最好制作一个通用功能，例如：

function toggleModal(id) {
    document.queryselector(`#${id}`).classList.toggle('modal-active');
}

然后创建一个按钮，如：

<button onclick="() => toggleModal(testModal1)">TEST</button>

要解释其确切作用：您实际上唯一要做的就是用display: unset切换一个类，使其显示出来。因此，如果它已经存在于其类中，则将从它中删除，否则将其添加到类中。

如果不是这种情况，请尝试在控制台（F12）中查看并在按下不起作用的按钮之一时观察错误

循环内的模态

1 个答案: