Краткое описание
Шорткод “Popup” начиная с версии 1.0.45 удален. Его функционал делегирован (и расширен) в шорткод “Layouts” – параметр ‘Type’ теперь может принимать значения:
- Default – обычный кастомный лайаут (как и раньше)
- Popup – выбранный лайаут “прячется” в popup и появится при нажатии кнопки, у которой в href указан “#popup_id”
- Panel – похоже на popup, но создается панель, которая “прилеплена” к заданному краю экрана и изначально задвинута за край экрана (не видна) и “выезжает” при нажатии кнопки, у которой в href указан “#panel_id”. “Выезд” панели полностью на CSS, так что в конкретных темах можно его менять на какие-то спецэффекты.
Параметр “Modal” указывает, что оставшаяся часть окна становится недоступной (закрыта пленкой).
Также можно задавать размер (ширину или высоту) панели в пикселах или процентах. Т.е., например, задавая “100%” получим fullscreen-панель
Попутно в параметры шорткода “Layouts” добавлено текстовое поле, в котором можно задавать альтернативный контент блока (чтобы не использовать заранее созданный лайаут). Это удобно, если в popup или panel нужно вставить что-то одно – видео (можно вставить просто ссылку), аудио, один простой шорткод (типа MailChimp или Google-карты) и для этого не хочется городить отдельный лайаут.
Т.е. для реализации “всплывающих окон” или панелей требуется два-три шага:
- Приготовить кастомный лайаут с необходимым контентом. Если внутри popup или panel должен появляться простой контент, который не требует визуального построителя – этот шаг можно опустить и указать контент внутри текстового поля на шаге 2
- Добавить на страницу шорткод “Layouts” и выбрать в нем ранее созданный лайаут или указать контент внутри текстового поля (если контент простой и не требует предварительного создания лайаута).
ОБЯЗАТЕЛЬНО задать шорткоду УНИКАЛЬНЫЙ ИДЕНТИФИКАТОР в поле “Element ID” - Добавить на страницу ссылку, кнопку (шорткод “Button”) или пункт меню, у которых в качестве URL указать “#идентификатор” окна, созданного на втором шаге. Внимание! Не забудьте указать знак ‘#’ (диез) перед идентификатором!
Обратите внимание!
- Расположение самого шорткода “Layouts” при создании всплывающих окон или панелей на странице не регламентируется. Его можно вставить куда угодно (например, в самом конце контента страницы).
- Если разработчик добавляет в popup какой-либо сторонний шорткод – он должен сам позаботиться о его корректной инициализации при открытии окна. Для этого можно использовать обработчики событий, вызывыемых при открытии popup:
// Init hidden elements
jQuery(document).trigger('action.init_hidden_elements', [jQuery(this.content)]);
или
// Init third-party plugins in the popup
jQuery(document).trigger('action.init_popup_elements', [jQuery(this.content)]);