PavelUstyugov
@PavelUstyugov
Я делаю сайты

Как реализовать, чтобы в попап окне загружалась страница и можно было перемещаться между страницами в попапе?

На сайте есть каталог товаров и ссылка под каждым товаром. При нажатии на ссылку открывается popup окно через magnific popup. А мне нужно сделать чтобы это попап окно заполнялось динамически, то есть загружало в себя конкретную страницу сайта в зависимости от переданного id при нажатии ссылки и главное чтобы если внутри этого попапа нажать на ссылку, то происходил бы переход на другую страницу внутри попапа, а не глобально через браузер. Как бы реализовать последнее?

Сейчас у меня попап - это div блок с определенными классами. Я так полагаю, что нужно взять iframe и засунуть вовнутрь див блока и через jquery заполнить его при открытии, но как сделать, чтобы при нажатии на ссылки (соседний товар) к примеру, мы загружали новую страницу внутри этого попапа?

И правильная ли идея через ифрейм это реализовывать? На бэкэнде я легко могу сделать генерацию нужной мне страницу - это не проблема. Но нужно чтобы она загружалась вовнутрь попапа.

Раньше я этот попап заполнял перед открытием передавая дата-параметры ссылки в js и заполняя данные попапа по id, но сейчас поменяли задачу и хотят чтобы можно было еще перемещаться между товарами.

На всякий случай сам сайт вот страница каталога
leader.sozdaitesite.ru/katalog
при нажатии на любой товар открывается окно и данные о товаре подставляются в это окно. Но теперь там должны появиться две ссылки "Предыдущий товар", "Следующий товар". И как хотябы сделать чтобы страница загружалась при нажатии на эти ссылки прям в попап окно? Может быть ответ намного проще и нужно просто параметры ссылки поменять чтобы ?
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
  • PavelUstyugov
    @PavelUstyugov
    Я делаю сайты
    в общем решил. помог ajax и jquery. по обычной схеме. отлавливаем нажатие на кнопку, получаем id, вызываем php скрипт, который по id ищет соседа левого или правого. считываем из соседа данные (картинки, значения параметров карточки). возвращаем в виде массива в js. ну а дальше через id подставляем новые значения. работает быстро.
    Ответ написан
Пригласить эксперта
Ответы на вопрос 1
  • Deonisius
    @Deonisius
    Родился в 11110110111 году, 11000 января.
    Возможно, что я не до конца понял, но как таковой проблемы, я не вижу. Экстраполируйте свою задачу в другой формат. Пусть это будет привычное всем слайд-шоу. Только в случае с изображениями слайдера, их все обычно загружают сразу, а в вашем случае - это может быть три части: текущий/видимый товар, предыдущий и следующий "за кадром". При переходе вправо или влево, подгружаете тем же ajax-ом новый товар в очередь.
    Единственное, что вам нужно вычислить - это "тело" модального окна и выводить полученные данные после ajax-запроса именно в этот элемент. Плюс проработать эффект перехода между товарами и разметку, но это уже не должно вызвать проблем.
    Кроме того, хоть я с плагином magnific popup не знаком, но судя из документации, возможность работы с динамическим контентом там учтена.
    Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы