循环中的模态

Question

I'm new to php and I have this problem. First I did display the inputed message using select and while loop in table. Then I want a functionality that can reply by getting the name or id of the selected row by clicking a button that shows a modal. The problem is only the first row are showing the modal. The rest of the rows aren't displayed. I've already searched for the answers and found out that modal is using the same id to display. I'm still a student and sorry for the messy codes. ` INBOX

    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

First things first.. Why are you creating a <table> everytime it runs the while loop?

But I think that the problem that your having is because of the way you try to toggle a Modal..

Every item is having one single Modal Toggle function but it's better to make a generic function like:

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

Then make a button like:

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

To explain what this exactly does: The only thing you're actually doing is toggling a class with display: unset so that it get's showed. So if it's already inside it's classes it will get removed from it, otherwise it gets added to the classes.

---

If this is not the case, try looking inside your console (F12) and watch for errors when pressing one of the not working buttons