Красноречивый показ мод с конкретной информацией об объекте - PullRequest
Новая
       29

Красноречивый показ мод с конкретной информацией об объекте

0 голосов
/ 01 июля 2019

В веб-интерфейсе я перечисляю несколько объектов и выполняю еще один foreach для модальной работы каждого из них, нажимая для отображения подробных данных.

Но, так или иначе, при щелчке по одному появляется модальное с каждой деталью других объектов. Я просто смотрю, когда нажимаю, чтобы получить доступ к своим данным.

Может кто-нибудь помочь мне в этом, пожалуйста? 

<section class="bg-light" id="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">Projects</h2>
                <h3 class="section-subheading text-muted">Projects elaborated throughout the years</h3>
            </div>
        </div>
        <div class="row">
            @foreach (\App\Project::all() as $project)
            <div class="col-md-4 col-sm-6 portfolio-item">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fas fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img class="img-fluid" src="img/portfolio/project.jpg" alt="">
                </a>
                <div class="portfolio-caption">
                    <h5>Project ID: {{ $project->id }}</h5>
                    <p class="text-muted">{{ $project->title }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl"></div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="modal-body">
                            @foreach (\App\Project::all() as $project)
                            <!-- Project Details Go Here -->
                            <h2 class="text-uppercase">{{$project-> name}}</h2>
                            <p class="item-intro text-muted">Projects Info</p>
                            <img class="img-fluid d-block mx-auto" src="img/portfolio/project.jpg" alt="">
                            <p>{{$project-> abstract}}</p>
                            <ul class="list-inline">
                                @if($project-> consortium != null)
                                <li>Consortium: {{ $project-> consortium }} </li>
                                @endif @if($project-> funding != null)
                                <li>Funding: {{$project-> funding}}</li>
                                @endif @if($project-> proponent != null)
                                <li>Proponent: {{$project-> proponent}}</li>
                                @endif @if($project-> total_budget != null)
                                <li>Total budget: {{$project-> total_budget}}€</li>
                                @endif @if($project-> ciic_budget != null)
                                <li>CIIC budget: {{$project-> ciic_budget}}€</li>
                                @endif
                            </ul>
                            <button class="btn btn-primary" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i> Close Project</button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 01 июля 2019

поместите весь модальный html-код во второй цикл, затем сгенерируйте уникальный идентификатор, чтобы модал работал правильно 

<section class="bg-light" id="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">Projects</h2>
                <h3 class="section-subheading text-muted">Projects elaborated throughout the years</h3>
            </div>
        </div>
        <div class="row">
            @foreach (\App\Project::all() as $project)
            <div class="col-md-4 col-sm-6 portfolio-item">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal{{ $project->id }}">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fas fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img class="img-fluid" src="img/portfolio/project.jpg" alt="">
                </a>
                <div class="portfolio-caption">
                    <h5>Project ID: {{ $project->id }}</h5>
                    <p class="text-muted">{{ $project->title }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

@foreach (\App\Project::all() as $project)
<div class="portfolio-modal modal fade" id="portfolioModal{{ $project->id }}" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl"></div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2 class="text-uppercase">{{$project-> name}}</h2>
                            <p class="item-intro text-muted">Projects Info</p>
                            <img class="img-fluid d-block mx-auto" src="img/portfolio/project.jpg" alt="">
                            <p>{{$project-> abstract}}</p>
                            <ul class="list-inline">
                                @if($project-> consortium != null)
                                <li>Consortium: {{ $project-> consortium }} </li>
                                @endif @if($project-> funding != null)
                                <li>Funding: {{$project-> funding}}</li>
                                @endif @if($project-> proponent != null)
                                <li>Proponent: {{$project-> proponent}}</li>
                                @endif @if($project-> total_budget != null)
                                <li>Total budget: {{$project-> total_budget}}€</li>
                                @endif @if($project-> ciic_budget != null)
                                <li>CIIC budget: {{$project-> ciic_budget}}€</li>
                                @endif
                            </ul>
                            <button class="btn btn-primary" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i> Close Project</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
...