Bymas.ru | Как передать данные в pop up

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

Galtsev.T , это что за бред полный?

REWERK (23 авг 2022, в 12:47)
Ты рендеришь столько же попапов, сколько и товаров у тебя?

Зачем если можно сделать всё одним

Менталист (23 авг 2022, в 12:30)
в общем я просто сделал добавление id с бд товара к концу id html тега ) что бы они были "уникальные"

Могу тебе за монетку сделать вывод
Будет одно модальное окно чем создавать целую кучу

Менталист (23 авг 2022, в 11:51)
Привет. Я использую php при работе с бд и выгрузкой товара. НО у меня есть pop up на js который открывается при кнопочке возле каждого товара. Как мне в это всплывающее окошко передавать данные по типу названия и тд? (что бы у каждого товара было свое)

пример вывода товара:

<?php

                     include 'admin/system/bd.php';

                     $sql = $pdo->prepare('SELECT * FROM services WHERE type = 1');

                     

                     $sql->execute();

                     $data = $sql->fetchAll();

                     ?>

                     <div class="donate__products-carts active" category-products="survival">

                     <?php

                 foreach($data as &$el) {?>

                         <div class="donate__products-item" product-id="kolt" block-amount>

                             <div class="donate__products-image">

                                 <img src="<?=$el['img'];?>">

                             </div>

                             <div class="product__item_info">

                                 <p class="donate__products-name"><?=$el['name'];?></p>

                             </div>

                             <div class="donate__products-buttons">

                                 <div class="product__price">

                                     <p class="donate__products-price"><?=$el['price'];?> ₴</p>

                                     <button modal-product="description"

                                             class="donate__products-button donate__products-info">Детальніше

                                     </button>

                                 </div>

                                 <div class="product__price">

                                     <button modal-product="buy" class="donate__products-button donate__products-buy"

                                             id="modalBtn" onclick="openModal()">

                                         Купить

                                     </button>

                                 </div>

                             </div>

                             <p class="donate__products-description">Какое то описание продукта Кольт</p>

                         </div>

                         <?php

                 }

                 ?>  </div>

Сам pop up:

<div class="modal" id="simpleModal">

     <div class="modal-content">

         <div class="popup_block">

             <span class="closeBtn">&times;</span>

             <div class="_container">

                 <div class="left_side">

                     <div class="left_side_bg">

                         <div class="popup_block_img">

                             <img src="assets/images/king.jpeg" alt="">

                         </div>

                         <div class="popup_block_name">

                             <p >

                                 Name

                             </p>

                         </div>

                         <div class="popup_block_price">

                             <p>2000 ₴</p>

                         </div>

                     </div>

                 </div>

                 <div class="right_side">

                     <div class="right_side_bg">

                         <div class="nickname_block">

                             <p>Введіть Ваш нікнейм</p>

                         </div>

                         <div class="popup_form">

                             <form class="modals__form" action="index.html">

                                 <input class="modals__input" type="text" id="nickname" name="nickname"

                                        placeholder="Нікнейм">

                                 <button class="modals__button">Купити</button>

                             </form>

                         </div>

                     </div>

                 </div>

             </div>

         </div>

     </div>

 </div>

Обработчик POP up:



 // Get modal element

 var modal = document.getElementById('simpleModal');

 

 // Get open modal button

 var modalBtn = document.getElementById('modalBtn');

 

 // Get close btn

 var closeBtn = document.getElementsByClassName('closeBtn')[0];

 

 // Listen for  open click

 modalBtn.addEventListener('click', openModal);

 

 // Listen for  close click

 closeBtn.addEventListener('click', closeModal);

 

 // Listen to outside click

 window.addEventListener('click', outsideClick)

 

 // Function to open modal

 function openModal(){

     modal.style.display = 'block';

     

 }

 

 // Function to close modal

 function closeModal(){

     modal.style.display = 'none';

 }

 

 // Function to outside click

 function outsideClick(e){

     if(e.target == modal){

         modal.style.display = 'none';

     }

 }

В одно модельное окно выводи переменные из цикла... Не вижу проблемы.

FullTwo scam (23 авг 2022, в 14:59)

Galtsev.T , это что за бред полный?

Ну если не вдаваться в js и использовать то что есть, совсем не бред.

Galtsev.T (23 авг 2022, в 16:12)
Ну если не вдаваться в js и использовать то что есть, совсем не бред.

так я же сделал) через одно модальное окно), цикл только для вывода. А модальное окно подтягивает данные при клике на кнопку по id из того что вывел цикл:)

какие же вы суровые разработчики)

Добавь к кнопке, по которой проходит клик данные в dataset. И потом просто по клику обращайся к нужному элементу и его dataset. e.target.dataset