Задать вопрос
zerofx
@zerofx
freelancer
wordpress

Как правильно передать ID поста в модальное окно?

Привет всем, друзья подскажите пожалуйста, есть блок который кратко описывает пост, при клике на ссылку в описании, хотел бы чтобы полный контент открывался в модальном окне.

Как я понимаю мне надо передать в модальное окно, точнее в его разметку или
1) ID поста - подставить его в цикл и вывести то что мне надо ...
2) передать в модальное окно уже готовый результат через ajax

который из этих вариантов правильный.
И может Вы знаете пример, чтобы посмотреть как он организован.

Спасибо всем кто откликнется!
  • Вопрос задан
  • 581 просмотр
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 2
@SmoKE_xD
2 пример лучше, как по мне
Ответ написан
3 комментария
3 комментария
ThunderCat
@ThunderCat Куратор тега Веб-разработка
{PHP, MySql, HTML, JS, CSS} developer
1) ID поста - подставить его в цикл и вывести то что мне надо ...


В цикл чего? Куда вывести? Откуда данные?

Варианта действительно 2:
1) по клику на неполный текст подгружать аяксом с сервера в переменную полностью пост, затем вывалить ее в элемент в модальном окне.
2) подгружать контент изначально весь в невидимый элемент, часть яваскриптом перебросить в видимый элемент в виде превью, по клику тупо все содержимое невидимого блока вываливать в элемент в модальном окне.

1 вариант медленнее и более нагрузочный, вам придется 2 раза запрашивать одни данные, + второй раз ждать загрузки с удаленного сервера.
2 вариант более затратный по памяти браузера, все содержимое(всех статей выводимых для превью) будет сдублировано на стороне клиента в виде скрытого элемента + видимого сокращенного куска, зато модаль будет загружаться мгновенно, и второй запрос к серверу будет не нужен.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@warcevil
Я делаю через fancybox, думаю как и многие. Просто указываешь скрипт, который возвращает уже готовый шаблон в модальное окно и все.
Ответ написан
4 комментария
4 комментария
gzhegow
@gzhegow
aka "ОбнимиБизнесмена"
Выводить контент с помощью fancybox - туда шаблон
Или сразу вывести все модальные окна и поскрывать их, а потом в div.modal иметь параметр data-modalname="" и скрипт который открывая новое окно, закрывает старое.

Не стоит забывать про мобильные устройства с маленьким экраном, это означает, что при создании модалок с нуля не стоит использовать position: absolute, left: 50%, top: 50%, поскольку размеры окна придется вручную высчитывать под размер экрана. Универсальное решение - темная подложка под модальным окном делается как и всегда position: fixed; width: 100%; height: 100%; но добавляем overflow-y: auto;
Потом идет div.modals__table (display: table), div.modals__cell (display: table__cell; vertical-align: middle); сами модалки - inline-block и они будут равняться по центру для любого экрана.

Модалкам после этого можно указать width: calc(100% - _двойной_отступ_) и потом каждой конкретной модалке задавать max-width.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
WordPress developer (Contractor, Remote)
Hicaliber
До 2 300 $
Разработчик на Wordpress
Nocodered
от 40 000 до 140 000 ₽
Контент-менеджер, редактор (web3, крипто, финансы)
Bitbanker.ru
от 80 000 до 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дописать функцию на Flutter, работа с yandex map kit
20 апр. 2024, в 04:18
3000 руб./за проект
Английская версия для сайта на WordPress
20 апр. 2024, в 03:34
8000 руб./за проект
Доработать клиентское приложение для GTA 5 на C#
20 апр. 2024, в 00:51
1000 руб./за проект
Ещё заказы