Как передать идентификатор в popup?

Question

[Andre548]

Всем привет, подскажите, как передать идентификатор в popup?
В гугле ничего не нашел, или плохо искал
есть див с продуктами, по клику на изображение или кнопке выбрать, открывается попап

<div class="products">
                    @foreach($products as $product)
                    <div class="product">
                        <div class="product_img">
                            <img src="{{'storage/' . $product->image}}" alt="">
                        </div>
                        <h2 class="product_title">
                            {{$product->name}}
                        </h2>
                        <div class="product_text">
                            {{$product->description}}
                        </div>
                        <div class="product_inf">
                            <div class="product_price">
                                от {{$product->price}} ₽
                            </div>
                            <button class="product_btn active">
                                Выбрать
                            </button>
                        </div>
                    </div>
                    @endforeach
                </div>

и начало popup

<div class="popUp popUp-product">
            <div class="popUp_content">
                <div class="popUp_form">
                    <div class="popUp_cross">

Answer 1

[Дмитрий]

Вынести popup в отдельный файл

<div class="popUp popUp-product" id="product-popup-{{$product->id}}">

<div class="products">
                    @foreach($products as $product)
                                <div class="product">
                                ...................
                                @include('popup.file', ['product' => $product])
                                </div>
                    @endforeach

Comments

[Andre548]

Это сработало, но позади попап черный фон

[Дмитрий]

Andre548, ну что то не так с вёрсткой. Надо править

[Andre548]

Дмитрий, таким методом кстати он передает последний продукт в цикле при клике на любой продукт

[Дмитрий]

Andre548, ну значит вы забыли в вызове указать какой попап показывать. Я не знаю как у вас попап вызывается - через id, вложенность или чего. В том куске кода что вы привели js кода нет.

З.Ы. Ваш вопрос был как передавать id - ну вам ответили.

[Andre548]

Дмитрий, Я впервые столкнулся с модальными окнами в верстке, и это вызвало у меня трудность

$('.product_btn, .product_img, .product_title').on('click', function (e) {
        e.preventDefault();
        $('.popUp-product').fadeIn(300);
    });

[Дмитрий]

Andre548,
Как то так - отматываем на корень div.product - в нем ищем попап, показываем.

$('.product_btn, .product_img, .product_title').on('click', function (e) {
        e.preventDefault();
        $(this).parents('.product').find('.popUp-product').fadeIn(300);
    });

Но собственно нахрен тогда вы Id пробрасывали?

[Andre548]

Дмитрий, так не хочет срабатывать вообще

[Дмитрий]

Andre548, ну сделайте console.log на каждом этапе.

$('.product_btn, .product_img, .product_title').on('click', function (e) {
        e.preventDefault();
        console.log($(this));
        console.log($(this).parents('.product'));
        console.log($(this).parents('.product').find('.popUp-product'));
        $(this).parents('.product').find('.popUp-product').fadeIn(300);
    });

и посмотрите где он чего не может найти.

[Andre548]

Дмитрий,

[Дмитрий]

$('.product_btn, .product_img, .product_title').on('click', function (e) {
        e.preventDefault();
        console.log($(this));
        console.log($(this).parents('.product'));
        console.log($($(this).parents('.product').get(0)).find('.popUp-product'));
        $($(this).parents('.product').get(0)).find('.popUp-product').fadeIn(300);
    });

[Andre548]

Дмитрий,

[Дмитрий]

Andre548, понял - запихайте @include внутрь div class="product"

[Andre548]

Дмитрий, тоже самое

[Дмитрий]

Andre548, приводите весь код на pastebin

[Andre548]

Дмитрий, https://pastebin.com/ZUREwfzS

[Дмитрий]

Andre548, ну и куда я вам сказал поставить?

<div class="products">
                    @foreach($products as $product)
                        <div class="product">
                            <div class="product_img">
                                <img src="{{'storage/' . $product->image}}" alt="">
                            </div>
                            <h2 class="product_title">
                                {{$product->name}}
                            </h2>
                            <div class="product_text">
                                {{$product->description}}
                            </div>
                            <div class="product_inf">
                                <div class="product_price">
                                    от {{$product->price}} ₽
                                </div>
                                <button class="product_btn active">
 
                                    Выбрать
                                </button>
                            </div>
                            @include('components.popup')
                        </div>
                    @endforeach
                </div>

[Andre548]

Дмитрий, а, не в тот див продукт вставил. Блин, спасибо Вам большое) очень выручили, я бы с этими попапами никогда бы не разобрался