Как сделать такое всплывающее окно?

https://www.w3schools.com/php/php_ajax_php.asp

1. В атрибуте data-id кнопки прописываете id товара.

2. По событию клика на кнопку отправляете запрос на сервер, в котором сообщаете id товара.

3. После получения ответа от сервера записываете полученные данные в скрытый блок с кодом окна и показываете этот блок.

Я так и не понял как из модального окна вызвать нужный PHP

Есть пример вызова модального окна для обратного звонка, но с него мы отправляем уже GET запрос на нужный PHP, а тут как?

Xubart, используйте технологию ajax.

Вот тут показан неплохой наглядный пример.

Вызвать можно с помощью JS

Можете попробовать код ниже (не тестил но должно работать).

На php повесьте функцию getProduct() с id товара на кнопку + сделайте скрипт который будет отдавать странницу с товаром.

//объект для работы с AJAX
function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}
//ниже типовой код для работы с AJAX
//query - параметры которые хотите передать серверу
//url - адрес скрипта на стороне сервера который будет обрабатывать переданные параметры
//f - функция которая будет выполнена в случае успешного запроса 
function ajax (query, url, f){
	var func = f || function (data) {console.log("Запрос выполнен!");}
	var request = getXmlHttp();
	request.open("POST", url);
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	request.send(query);
	request.onreadystatechange = asyncComplete;
	function asyncComplete(){
		if(request.readyState==4){
			if (request.readyState == 4){
				if (request.status == 200){
					func(request);
				}else{
					console.log("Сервер не доступен.");
				}
			}
		}
	}
}
//реализация вашей задачи
function getProduct(id){
	var url='http://site.ru/script.php';
        var query="product="+id;
        var f= function (data){
		var b = document.getElementsByTagName("body")[0];
                var modal = document.createElement("div");
                modal.innerHTML=data.responseText;
                b.appendChild(modal);
        }
        ajax (query, url, f);
}

Xubart, стучите по контактам, попробую помочь разобраться.

не напрягайся - используй готовую библиотеку, например fansybox (третий пример с ифреймом или хтмл)

Запрос на нужный скрипт PHP отправляется аяксом при нажатии кнопки. А модальное окно выводится после получения ответа на этот запрос. Насколько я понял из стартпоста, Вам требуется именно это.