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

X
На сайте с 04.12.2018
Offline
257
573

На странице магазина при нажатии кнопки "Купить" всплывает окно с конкретным товаром.

Написать PHP скрипт, который выгрузит данные товара я могу, но как вызвать окно и в нем запросить этот скрипт с нужным ID?

Удобный съем позиций (http://allpositions.ru/redirect/58277)
HM
На сайте с 14.01.2012
Offline
223
#1
S
На сайте с 30.09.2016
Offline
469
#2

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

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

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

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
X
На сайте с 04.12.2018
Offline
257
#3

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

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

orlov90
На сайте с 21.03.2019
Offline
1
#4

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

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

SS
На сайте с 15.12.2015
Offline
77
#5

Вызвать можно с помощью 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);
}
Размещение естественных ссылок на тематических порталах, отзовиках, справочниках (/ru/forum/1013919)
orlov90
На сайте с 21.03.2019
Offline
1
#6

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

totamon
На сайте с 12.05.2007
Offline
408
#7
Xubart:
Я так и не понял как из модального окна вызвать нужный PHP

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

Дедик от 3000р https://8fn.ru/sape | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
S
На сайте с 30.09.2016
Offline
469
#8
Xubart:
Я так и не понял как из модального окна вызвать нужный PHP

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий