Html Model Box在laravel视图中不起作用答案

【问题标题】：Html Model Box not work loop in laravel viewHtml Model Box在laravel视图中不起作用
【发布时间】：2020-01-18 03:55:06
【问题描述】：

我想使用循环显示网页中的文本和保存在数据库中的 html Modal Box.texts。我正在使用 laravel 框架。只显示第一项的模式框，也许它可能是 JavaScript 没有加载问题。我用了https://www.w3schools.com/howto/howto_css_modals.asp Modal box tutorials.used那个css和javascript代码。

刚刚使用了 w3schools 代码。

<div class="row">
    @foreach($dw as $ad)
        <!-- single product -->
        <div class="col-lg-4 col-md-6">
            <div class="single-product">
                <!--{{$ad->image}}-->
                <div>
                    <img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
                </div>

                <div class="product-details">
                    <h3 col-xl-5>{{$ad->jobtype}}</h3>
                    <div class="price col-xl-11">
                        <h6 col-xl-12>{{$ad->jobC}}</h6>
                        <div>
                            <button id="myBtn">Details</button>

                            <!-- The Modal -->
                            <div id="myModal" class="modal">

                                <!-- Modal content -->
                                <div class="modal-content">
                                    <span class="close">&times;</span>
                                    <p>{{$ad->details}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="prd-bottom"><a href="{{url('/submitcv')}}">Send Your CV</a></div>
                </div>
            </div>
        </div>
    @endforeach

所有集合都没有显示错误但不工作的模式框，只显示循环中的第一项

【问题讨论】：

在您的 HTML 中，您在循环中硬编码了 id="myBtn"。但是，id 的必须在文档中是唯一的。您的h3 和h6 上似乎也缺少class=""。您还应该添加您的 JS，因为那是实际上应该显示您的模式的代码。
你能上传到某个地方，我看看你的结果好吗？

标签： javascript php html css laravel-5

【解决方案1】：

为每个模态设置 ID 并使用单击按钮打开它们

<div class="row">
            @foreach($dw as $ad)
                <!-- single product -->
                <div class="col-lg-4 col-md-6" {{ $makeId = 1 }}>
                    <div class="single-product">

                    <!--{{$ad->image}}-->
                    <div>
                    <img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
                    </div>
                        <div class="product-details">
                            <h3 col-xl-5>{{$ad->jobtype}}</h3>
                            <div class="price col-xl-11">
                                <h6 col-xl-12>{{$ad->jobC}}</h6>
                                <div>
                                <button class="myBtn" modal-id="modal-{{ $ad->id }}">Details</button>

                                <!-- The Modal -->
                                <div class="modal" id="modal-{{ $ad->id }}">

                                <!-- Modal content -->
                                <div class="modal-content">
                                    <span class="close">&times;</span>
                                    <p>{{$ad->details}}</p>
                                 </div>

                                </div>
                                </div>
                            </div>
                            <div class="prd-bottom"><a href="{{url('/submitcv')}}">Send Your CV</a></div>
                        </div>
                    </div>
                </div>@endforeach

                <script>
                    $('.myBtn').click(function(){
                        var GetModalId = $(this).attr('modal-id');
                        $("#"+GetModalId).css('display', 'block');
                    });

                    $('.close').click(function(){
                        $('.modal').css('display', 'none');
                    });
                </script>

请记住，您需要将 jquery 附加到您的页面才能使用此代码

您可以使用此代码附加 jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

【讨论】：