来自 Laravel 循环的引导弹出窗口
Posted
技术标签:
【中文标题】来自 Laravel 循环的引导弹出窗口【英文标题】:Boostrap popup from a loop in Laravel 【发布时间】:2022-01-04 11:31:45 【问题描述】:我有来自循环的内容,我在网格框中显示标题和图像。 此外,在每个内容框中,我都有查看更多按钮,当用户单击时,它会在弹出窗口中显示完整内容(标题、图像、正文)。
我已经使用 Bootstrap 模式进行了测试,并且弹出功能有效,但是当我从第一个或第二个框中单击查看更多时,弹出窗口始终显示第一个框中的内容。
我该如何解决这个问题,所以当用户点击第二个框中的“查看更多”时,会显示第二个框中的完整内容?
每个内容也都有来自数据库的 ID 参数,例如第一个框的 ID 为 1,第二个框的 ID 为 2,那么如何通过内容的 ID 过滤弹出窗口?
这是我的代码:
@foreach($drivings as $driving)
<div class="col-sm-3">
<div class="box-inner">
<div class="image">
<img class="img-fluid" src=" Storage::url($driving->image) " />
</div>
<div class="title">
$driving->title
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
View more
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> $driving->title </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="image">
<img class="img-fluid" src=" Storage::url($driving->image) " />
</div>
<div class="modal-body">
!! $driving->body !!
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
【问题讨论】:
【参考方案1】:您在每次迭代#exampleModal
中定位相同的 ID。因此,每个按钮都有相同的目标,ID 为 #exampleModal
。
所以解决方案是附加当前驾驶ID。
假设您使用 id 来切换模式,您可以在按钮中执行以下操作:
data-target="#exampleModaldriving->id"
在模态中:
id="#exampleModaldriving->id"
【讨论】:
我只是想写那个 非常感谢!我刚改成“#exampleModal- $driving->id ”,它工作正常。 :)【参考方案2】:在刀片中使用 foreach 时这是一个很常见的问题
问题是您的所有模态 div 都具有相同的 id,因此您的代码仅检测到第一个带有它的 div。您必须为所有模态 div 和按钮视图提供不同的 id。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal- $driving->id ">
View more
</button>
<div class="modal fade" id="exampleModal- $driving->id " tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel- $driving->id "> $driving->title </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="image">
<img class="img-fluid" src=" Storage::url($driving->image) " />
</div>
<div class="modal-body">
!! $driving->body !!
</div>
</div>
</div>
【讨论】:
感谢 back2lobby,问题已经解决,但也感谢您的回答。 +1 来自我 :) 他回复时我正在写这个答案 XD以上是关于来自 Laravel 循环的引导弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章