PHP 中的纯 CSS 模态(不是引导程序)而循环

Question

我有一个纯粹的基于 css 的模态，因为我出于某种原因没有在项目上使用引导程序。当在通过 while 循环获取的记录内单击链接时，模式应打开。现在的问题是我想根据为其创建模态的特定记录获取和显示记录，因为不同的记录当然有不同的数据，但我不知道如何做到这一点。这是我的代码。

<?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>

我搜索了一些类似的问题，但都与引导有关。我还尝试将它们从引导程序中分离出来并在我的引导程序上尝试，但它们似乎不起作用。

Answer 1

这里有两个想法，

1. 第一：使用数据符号。 静态示例是

$(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>

2. 秒：发送带有 ID 的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>