在foreach循环中插入"表中模式"单元格

Question

我正在尝试为一个按钮和另一个向控制器提交数据的按钮制作一个模式弹出窗口。

这是的表格代码

<table class="table-bordered">
<tr>
<th>&nbsp; Name &nbsp;</th>
<th>&nbsp; Current Rank &nbsp;</th>
<th>&nbsp; Next Rank &nbsp;</th>
<th>&nbsp; Last Promoted &nbsp;</th>
<th>&nbsp; Promoted by &nbsp;</th>
<th>&nbsp; Promote &nbsp;</th>
</tr>
@foreach($promotionarray as $row)
<?php
if ($username == $targetname) {
}
elseif ($username != $targetname) { ?>             <?php
if ($userrankdiv <= $rankdiv){
}
elseif ($userrankdiv > $rankdiv && $userrankdiv > $nextrankdiv){
if ($currenttime < $time){
}
elseif($currenttime >= $time){
if ($nextrankdiv==$rankdiv){ ?><tr data-toggle="modal" data-target="#m   odal">
<td> &nbsp; {{$row['username']}}  &nbsp; </td>
<td> &nbsp; {{$rank}} &nbsp;  </td>
<td> &nbsp; {{$newrank}} &nbsp;  </td>
<td> &nbsp; {{ CarbonCarbon::parse($row['updated_at'])->format('d/m/y   h:m')}} &nbsp;  </td>
<td> &nbsp; - &nbsp;  </td>
<td>
<div class="quickViewTrigger">  <button class="btn btn-primary" data-toggle="modal" data-target="#modal"> Promote </button>
</div>
<!-- HIDDEN -->
<div class="quickViewContainer">
<div id="quickViewCloseButton" class="close" style="margin-right:10px;"><span></span></div>
<div class="quickViewTitle">MODAL 1</div>
<div class="quickViewBody">Do you want to promote the following user?
&nbsp;&nbsp;          <?php echo '<img src="https://www.habbo.com/habbo-imaging/avatarimage?user='.$username.'&direction=4&head_direction=3&gesture=sml&size=2" />' ; ?>
<form method="post" action="{{route('promote.update',['id' => $id ])}}">
{{csrf_field()}}
<input type="hidden" name="_method" value="PUT" />
<input type="hidden" name="rank" class="'form-control" value="{{$rankid}}" readonly />
<input type="hidden" name="oldrank" class="'form-control" value="{{$oldrankid}}" readonly />
<input type="hidden" name="division" class="'form-control" value="{{$nextrankdiv}}" readonly />
<input type="hidden" name="targetname" class="'form-control" value="{{$targetname}}" readonly />
<input type="hidden" name="id" class="'form-control" value="{{$id}}" readonly />
<input type="submit" class="btn btn-primary" value="Promote" />
</form>
&nbsp;

</div>
</div>
</td>
<?php
}
elseif ($nextrankdiv>$rankdiv){
switch ($train) {
case 0: ?><tr>
<td> &nbsp; {{$row['username']}} &nbsp; </td>
<td> &nbsp; {{$rank}} &nbsp;  </td>
<td> &nbsp; {{$newrank}} &nbsp;  </td>
<td> &nbsp; {{ CarbonCarbon::parse($row['updated_at'])->format('d/m/y   h:m')}} &nbsp;  </td>
<td> &nbsp; - &nbsp;  </td>
<?php
break;
case 1:               ?><tr>
<td> &nbsp; {{$row['username']}} {{$train}}&nbsp; </td>
<td> &nbsp; {{$rank}} &nbsp;  </td>
<td> &nbsp; {{$newrank}} &nbsp;  </td>
<td> &nbsp; {{ CarbonCarbon::parse($row['updated_at'])->format('d/m/y   h:m')}} &nbsp;  </td>
<td> &nbsp; - &nbsp;  </td>
><?php
break;
}                ?>
<?php    }
}
}
} ?>
</tr>
@endforeach

以及末尾的js代码

<script type="application/javascript">
$(document).ready(function() {
"use strict";
// OPEN MODAL ON TRIGGER CLICK
$(".quickViewTrigger").on('click', function () {
var $quickview = $(this).next(".quickViewContainer");
$quickview.dequeue().stop().slideToggle(500, "easeInOutQuart");
$(".quickViewContainer").not($quickview).slideUp(200, "easeInOutQuart");
});
// CLOSE MODAL WITH MODAL CLOSE BUTTON
$(".close").click(function() {
$(".quickViewContainer").fadeOut("slow");
});
});
// CLOSE MODAL ON ESC KEY PRESS
$(document).on('keyup', function(e) {
"use strict";
if (e.keyCode === 27) {
$(".quickViewContainer").fadeOut("slow");
}
});
// CLOSE MODAL ON CLICK OUTSIDE MODAL
$(document).mouseup(function (e) {
"use strict";
var container = $(".quickViewContainer");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$('.quickViewContainer').fadeOut("slow");
}
});
</script>

模态出现在单元格内，而不是弹出窗口，当触发所有单元格的效果时，不会做出响应。我需要模态在细胞内工作

Answer 1

通过在模式id 中实现动态id修复

id="modal<?php echo $row['id'] ;?>"