Чистый CSS Модальный (не Bootstrap) внутри PHP Во время цикла

Question

У меня есть чистый модал, основанный на css, так как по какой-то причине я не использую bootstrap в проекте. Модальное окно должно открываться при нажатии на ссылку внутри записей, выбранных с помощью l oop. Теперь проблема заключается в том, что я хочу получить и отобразить запись в соответствии с той конкретной записью, для которой создается модальное поле, поскольку разные записи, конечно, имеют разные данные, но я не понимаю, как это сделать. Вот мои коды.

<?php while($rm = $rooms->fetch()){ ?>
  <tr>
    <td class="text-left"><?php echo $rm['rm_name']; ?></td>
    <td><?php echo $rm['rm_max_children']; ?></td>
    <td><a href="#modal-one" class="modelView" data-id="<?php echo $rm['rm_id'];?>">View</a></td>
    <td></td>
  </tr>
<?php } ?>
<div class="modal" id="modal-one" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Facilities</h2>
      <a href="#" class="btn-close" aria-hidden="true">×</a>
    </div>
    <div class="modal-body">
      <div class="modelContent">Different record as per id to be displayed here by field <?php echo $rm['rm_facilities']; ?></div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Close</a>
    </div>
  </div>
</div>

Я искал несколько похожих вопросов, но все они были связаны с bootstrap. Я также пытался вырвать их из bootstrap и попробовать на моем, но, похоже, они не сработали.

Answer 1

Здесь есть две идеи:

1. первая : используйте данные-нотации . stati c пример

$(document).ready(function() {
  $('.btn-close').click(function(e) {
    $('.modal').hide();
  });

  // hide modal by default
  $('.modal').hide();

  $('.modelView').click(function(e) {
    var id = $(this).data('id');
    var name = $(this).data('name');
    var children = $(this).data('children');
    var description = $(this).data('description');

    $('#RoomId').text(id);
    $('#RoomName').text(name);
    $('#RoomChildren').text(children);
    $('#RoomDescription').text(description);

    // show modal
    $('.modal').show();
  });
});

<table border="1" style="width: 100%;">
  <thead>
    <th>Name</th>
    <th>Children</th>
    <th></th>
  </thead>

  <tbody>
    <tr>
      <td class="text-left">Room 1</td>
      <td>4</td>
      <td><a href="#modal-one" class="modelView" data-id="1" data-name="Room 1" data-description="room 1 description room 1 description room 1 description" data-children="4">View</a></td>
      <td></td>
    </tr>
    <tr>
      <td class="text-left">Room2</td>
      <td>3</td>
      <td><a href="#modal-one" class="modelView" data-id="2" data-name="Room 2" data-description="room 2 description room 2 description room 2 description" data-children="3">View</a></td>
      <td></td>
    </tr>
  </tbody>
</table>


<div class="modal" id="RoomDeatilModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Facilities</h2>
      <a href="#" class="btn-close" aria-hidden="true">×</a>
    </div>
    <div class="modal-body">
      <div class="modelContent">
        <div>
          <b>Room Id:</b>
          <span id="RoomId"></span>
        </div>
        <div>
          <b>Room Name:</b>
          <span id="RoomName"></span>
        </div>
        <div>
          <b>Children:</b>
          <span id="RoomChildren"></span>
        </div>
        <div>
          <b>Room Description:</b>
          <span id="RoomDescription"></span>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Close</a>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Второй: отправьте AJAX запрос с идентификатором и получите данные, затем отобразите их в модальном

$(document).ready(function() {
  $('.btn-close').click(function(e) {
    $('.modal').hide();
  });

  // hide modal by default
  $('.modal').hide();

  $('.modelView').click(function(e) {
    var id = $(this).data('id');

    //$.get('/api/Rooms/getById/' + id, function(response) { // send ajax with this line
    var response = { id: 1, name: 'room 1', children: 4, description: 'description room 1'}; // remove this line after call ajax .. this is example of ajax response
      $('#RoomId').text(response.id);
      $('#RoomName').text(response.name);
      $('#RoomChildren').text(response.children);
      $('#RoomDescription').text(response.description);

      // show modal
      $('.modal').show();
    //});

  });

});

<table border="1" style="width: 100%;">
  <thead>
    <th>Name</th>
    <th>Children</th>
    <th></th>
  </thead>

  <tbody>
    <tr>
      <td class="text-left">Room 1</td>
      <td>4</td>
      <td><a href="#modal-one" class="modelView" data-id="1">View</a></td>
      <td></td>
    </tr>
  </tbody>
</table>


<div class="modal" id="RoomDeatilModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Facilities</h2>
      <a href="#" class="btn-close" aria-hidden="true">×</a>
    </div>
    <div class="modal-body">
      <div class="modelContent">
        <div>
          <b>Room Id:</b>
          <span id="RoomId"></span>
        </div>
        <div>
          <b>Room Name:</b>
          <span id="RoomName"></span>
        </div>
        <div>
          <b>Children:</b>
          <span id="RoomChildren"></span>
        </div>
        <div>
          <b>Room Description:</b>
          <span id="RoomDescription"></span>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Close</a>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>