Отрывается модальное окно только у одной записи

Question

Открывается окно только у первого элемента

        <?php                           
                  $result=mysqli_query($con,"SELECT * FROM room 
                  WHERE  id_user='$id' ");
    
                  while ($row=mysqli_fetch_array($result)){
    
                  $id_room=$row['id_room'];
                  $adres=$row['adres'];
                  $price=$row['price'];
    
    
                ?>
    <button id="myBtn">Открыть окно</button>
            
    <div id="myModal" class="modal">
             
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2><? echo "$id_room"; ?></h2>
        </div>
        <div class="modal-body">
          <p>текст...</p>
        </div>
        <div class="modal-footer">
          <h3>Футер модального окна</h3>
        </div>
      </div>
    
    </div>
    
                                <h4><a href="#"><? echo "$adres"; ?></h4>
                                <span><? echo($adres) ?> </span>
                                <span class="table-property-price">$900 / monthly</span>
                            </div>
                        </td>
                        <td class="expire-date">December 30, 2021</td>
                        <td class="action">
                            <a href="editroom.php?room=<? echo $id_room ?>"><i class="fa fa-pencil"></i>Изменить</a>
                            <a href="#"><i class="fa  fa-eye-slash"></i>Скрыть</a>
                            <a href="#" class="delete"><i class="fa fa-remove"></i>Удалить</a>
    
                        </td>
    
                    </tr>
                <?
            }
            ?>

  <script type="text/javascript">
        
        var modal = document.getElementById('myModal');
    
    
    var btn = document.getElementById("myBtn");
    
    
    var span = document.getElementsByClassName("close")[0];
    
    
    btn.onclick = function() {
        modal.style.display = "block";
    }
    
    
    span.onclick = function() {
        modal.style.display = "none";
    }
    
    
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    </script>

Answer 1

MDN Web Docs объясняет:

Глобальный атрибут id устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице).

А у вас для каждого элемента модального окна установлен один и тот же идентификатор:

<?php
...

while ($row=mysqli_fetch_array($result)) {
    $id_room=$row['id_room'];
    $adres=$row['adres'];
    $price=$row['price'];
?>
    <button id="myBtn">Открыть окно</button>    //здесь
    <div id="myModal" class="modal">            //здесь
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2><? echo "$id_room"; ?></h2>
        </div>
        <div class="modal-body">
          <p>текст...</p>
        </div>
        <div class="modal-footer">
          <h3>Футер модального окна</h3>
        </div>
      </div>
    </div>

...
<?php
}
?>

Используйте классы вместо идентификаторов.

БЛОГ НА HUSL

Отрывается модальное окно только у одной записи

Ответы (1 шт):