Решил через PHP и плагин JS magnificPopup
По итогам на данный момент имеем массив вида
$cmodels = array(
array(
"Название" => '',
"Описание" => '<p></p>',
"Изображение" => '',
"Цена" => '',
"ТТХ1" => '<li></li>',
"ТТХ2" => '<li></li>',
"ТТХ3" => '<li></li>',
"ТТХ4" => '<li></li>',
"ТТХ5" => '<li>Цветной дисплей/li>',
"CmodelsId" => 'CmodelsId1'
),
);
И обработчик корявый и обьёмный, но рабочий
for ($row = 4; $row < 10; $row++) {
foreach($cmodels[$row] as $key => $value)
{
$counter = 1;
echo '<div class="row">' ;
echo '<div class="col-1"></div>' ;
echo '<div class="col-10">' ;
echo '<center>' . '<h5>' . $cmodels[$row]["Название"] . '</h5>' . '</center>';
echo '<p>' . $cmodels[$row]["Описание"] . '</p>';
echo '</div>';
echo '<div class="col-1"></div>' ;
echo '<div class="col-12">' ;
echo '<p>' . $cmodels[$row]["Цена"] . '</p>';
echo '<ul>';
echo '<img class="RightImg30" src="'; echo $cmodels[$row]["Изображение"]; echo '">';
echo $cmodels[$row]["ТТХ1"]; echo $cmodels[$row]["ТТХ2"]; echo $cmodels[$row]["ТТХ3"];
echo $cmodels[$row]["ТТХ4"]; echo $cmodels[$row]["ТТХ5"]; echo $cmodels[$row]["ТТХ6"];
echo $cmodels[$row]["ТТХ7"]; echo $cmodels[$row]["ТТХ8"]; echo $cmodels[$row]["ТТХ9"];
echo $cmodels[$row]["ТТХ10"]; echo $cmodels[$row]["ТТХ11"]; echo $cmodels[$row]["ТТХ12"];
echo $cmodels[$row]["ТТХ13"]; echo $cmodels[$row]["ТТХ14"]; echo $cmodels[$row]["ТТХ15"];
echo $cmodels[$row]["ТТХ16"]; echo $cmodels[$row]["ТТХ17"]; echo $cmodels[$row]["ТТХ18"];
echo $cmodels[$row]["ТТХ19"]; echo $cmodels[$row]["ТТХ20"]; echo $cmodels[$row]["ТТХ21"];
echo $cmodels[$row]["ТТХ22"]; echo '</ul>';
echo '<a class="BuyButton popup-with-zoom-anim" href="#'; echo $cmodels[$row]["CmodelsId"]; echo '">открыть</a>';
echo '</div>';
echo '</div>';
echo '<div id="'; echo $cmodels[$row]["CmodelsId"]; echo '" class="popup-window zoom-anim-dialog mfp-hide">' ;
echo '<center><h4>'; echo $cmodels[$row]["Название"]; echo '</h4></center>';
echo '<ul>';
echo '<img class="RightImg30" src="'; echo $cmodels[$row]["Изображение"]; echo '">';
echo $cmodels[$row]["ТТХ1"]; echo $cmodels[$row]["ТТХ2"]; echo $cmodels[$row]["ТТХ3"];
echo $cmodels[$row]["ТТХ4"]; echo $cmodels[$row]["ТТХ5"]; echo $cmodels[$row]["ТТХ6"];
echo $cmodels[$row]["ТТХ7"]; echo $cmodels[$row]["ТТХ8"]; echo $cmodels[$row]["ТТХ9"];
echo $cmodels[$row]["ТТХ10"]; echo $cmodels[$row]["ТТХ11"]; echo $cmodels[$row]["ТТХ12"];
echo $cmodels[$row]["ТТХ13"]; echo $cmodels[$row]["ТТХ14"]; echo $cmodels[$row]["ТТХ15"];
echo $cmodels[$row]["ТТХ16"]; echo $cmodels[$row]["ТТХ17"]; echo $cmodels[$row]["ТТХ18"];
echo $cmodels[$row]["ТТХ19"]; echo $cmodels[$row]["ТТХ20"]; echo $cmodels[$row]["ТТХ21"];
echo $cmodels[$row]["ТТХ22"]; echo '</ul>';
echo '<div class="SeparateRow"></div>';
echo '<form id="form">';
echo '<div class="container"><div class="row">';
echo '<div class=" col-md-12 col-lg-4">';
echo '<input type="text" name="nameBuyform" required="required" placeholder="Как к вам обращаться"/>';
echo '</div><div class=" col-md-12 col-lg-4">';
echo '<input type="text" name="phoneBuyform" required="required" placeholder="Ваш телефон"/>';
echo '</div><div class=" col-md-12 col-lg-4">';
echo '<input type="text" name="mailBuyform" required="required" placeholder="Адресс электронной почты"/>';
echo '<input type="submit" value="Заказать звонок"/>';
echo '</div>';
echo '</div></div>';
echo '</form>';
echo '</div>';
$counter ++;
if ($counter>1) break; //количество товаров
}
}
Для того чтоб вызывать всплывающие окна использовано
В Head сайта
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha256-PZLhE6wwMbg4AB3d35ZdBF9HD/dI/y4RazA3iRDurss=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha256-P93G0oq6PBPWTP1IR8Mz/0jHHUpaWL0aBJTKauisG7Q=" crossorigin="anonymous"></script>
Так же небольшая стилизация css контейнера всплывающего окна
и скрипт инициализатор под обработчиками массивов
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
});
PHP как и JS ток начал учить, так что за кривизну кода не бейте. Осталось вживить в этот конструктив форму обратной связи с данными для обратной связи и передачей полного описания товара поставщику, но вдруг кому то пригодиться в таком виде.