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

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

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

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

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

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

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

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

html

   <?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:

html

   <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:

javascript

   // 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 [!] (23 авг 2022, в 14:59)

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

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

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

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

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

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