0

Помогите с реализацией передачи данных в модальное окно. Есть шаблонный контейнер, в который динамически поступают данные: картинка, имя, цена, описание, состав и айди продукта. Таких контейнеров отображается сотни на странице.

<div class="product_example text-center p-2">
<img  alt="food1" class="img-fluid" src=<?php echo $image_product; ?> >
<div>
    <h4><?php echo $name_product; ?></h4>
    <h5>Цена: <?php echo $price_product; ?> грн</h5> 
    <button <?php echo $id_product ?> type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#modalwindow">Купить</button>
</div>

И при нажатии на клавишу появляется модальное окно, в которое я хотел передать все эти данные тоже.

<div class="modal scrollbar scrollbar-secondary" tabindex="-1" role="dialog" id="modalwindow" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title"><?php echo $name_product; ?></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="row">
                <img alt="chocolate" class="img-fluid" src=<?php echo $image_product; ?> >
            </div>
            <div class="row">
                <h5 class="col-8">Цена:</h5>
                <h5 class="col-4 text-right"><?php echo $price_product; ?> грн</h5>
            </div>
            <div class="row modal_price my-1 align-middle py-1">
                <h5 class="col-6 my-0">Кол-во:</h5>
                <div class="col-6 text-right row mx-0">
                    <button class="btn_minus ml-auto" onclick="take_away()">-</button>
                    <input type="text" value="1" class="count_product col-3 text-center">
                    <button class="btn_plus" onclick="add_count_product()">+</button>
                </div>
            </div>
            <p><?php echo $description_product; ?></p>
            <h5>Состав:</h5>
            <ul>
                <?php echo $structure_product; ?>
            </ul>
        </div>
        <script>
        var price_product='<?= $price_product ?>';
        </script>
        <div class="modal-footer">
            <div class="row">
                <h5 class="col-8 p-0">Цена:</h5>
                <h5 class="col-4 text-right p-0">
                <span id="final_cost"><?php echo $price_product; ?></span>
                грн</h5>
            </div>
            <div class="row mt-2">
                <div class="col-6 pl-0 pr-1">
                    <button type="button" class="btn btn-secondary btn-lg btn-block">В избранное</button>
                </div>
                <div class="col-6 text-right pl-1 pr-0">
                    <button type="button" class="btn btn-primary btn-lg btn-block">В корзину</button>
                </div>
            </div>
        </div>
    </div>
</div>

Но так как модальное окно тоже реализовано тоже шаблонно, при вызове его высвечивается последние данные которыми я заполнял контейнер. Т.е. получается не соответствие между содержимым контейнера и модального окна. Помогите правильно реализовать передачу данных. P.S. Пишу на чистом JavaScript.

1 ответ 1

0

ну на jquery было бы проще но логика такая

  1. Даете айдишки или класы елементам контент который вы хотите передать
  2. Получаете их значения в переменные (document.getElementById() и т.п. - получение елемента, как получить значение разберетесь)
  3. По клику на кнопку открытия окна в нужные елементы окна подставляете значения переменных (document.getElementById() или аналог) присваете значения из переменных, например document.getElementById('title').innerHTML = yourVariable;
  4. Открываете окно после всех манипуляций

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.