WP Post Popup – Отличный плагин для отображения контента страниц и записей в всплывающем окне

Загрузить плагин

Загрузить пплагин можно по ссылке ниже:

https://wordpress.org/plugins/wp-post-modal/

Превратите любую страницу, пост, пользовательский тип записей во всплывающее окно!

Идеально подходит для отображения основных страниц контента без пере направления пользователя на страницу, отображения контента в всплывающем (модальном) окне.

Характеристики

• Загружает только поле the_content() — исключая заголовок / нижний колонтитул / боковые панели / и т.д.
• При желании можно загрузить пользовательские поля с помощью пользовательского шаблона страницы.
• Вызов всплывающего окна при загрузке страницы с использованием параметра URL
• Показать внешние страницы во всплывающем окне на Вашем сайте
• Позволяет показывать только определенный div с внешней страницы
• Работает с шорт кодами и различными плагинами, такими как Contact Form 7 и BuddyPress
• Динамически изменить URL-адрес в адресной строке на адрес всплывающей страницы
• Поддерживает подключение стилей отображения
• Визуальный редактор — кнопка для легкого создания всплывающей ссылки
• Установите точку брекпоинта, ниже которой будет загружаться страница вместо всплывающего окна.

Полезные ссылки

• Демо-сайт
• Документация

Избавляемся от ошибки «Uncaught ReferenceError: wp is not defined wp-post-modal-public.js:70»

По сути этот баг связан с кастомизацией заданной на страниц настроек плагина в админке.
Данная ошибка выглядит следующим образом:

И если Вам позволяет опыт, Вы можете задать внешний вид всплывающих окон при помощи CSS и jQuery без использования настроек на стороне админки. По этому просто отключим обработчик.

Первое что нужно сделать это за комментировать по данному пути:

/wp-content/plugins/wp-post-modal/public/js/wp-post-modal-public.js

Cтроку:

modalCustomizer();

То есть в коде данного файла строка должна выглядеть так:

    // Window load
    $(window).on('load', function () {
        // modalCustomizer();
    });

Ниже я «заскринил» страницу с настройками которые я всегда устанавливаю для данного плагина.

jQuery пример реализации «умного» прилоадера

Задача прилоадера — отображаться до тех пор пока контент записи не будет загружен. Когда контент был загружен успешно прилоадер будет удален.

Для работы прилоадер должен быть подключен скрипт jquery-watch.

Загрузить скрипт jquery-watch

https://github.com/RickStrahl/jquery-watch

Переделываем код под себя

CSS

/* Preloader */
.modal-wrapper.styled .modal {
    min-height: 385px;
/*    background: transparent url(/wp-content/uploads/2018/02/dollar-glass.gif) center center/cover no-repeat scroll;*/
    background-color: white;
    background-size: inherit;
}

div#modal-content {
    background-color: white;
}

.modal-wrapper.styled .modal{ 
background: white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll;
}

#single-post-meta-manager{
     opacity: 0;
}
div.modal-content-post-wrapped.load {
    opacity: 1;
}

JS код

<script type="text/javascript">
jQuery(document).ready(function($){
// Плавное появление контента в модальном окне
$("div#single-post-meta-manager").animate({ 'opacity':'1' }).fadeIn('slow');

// Добавляем класс информер - "Контент загружен поехали дальше!".
$("div.modal-content-post-wrapped").addClass("load");

//$('.modal-wrapper.styled .modal').css('background','none');
// Отслеживаем модальное окно
$(".modal-wrapper").watch({
properties: "top,left,opacity,display,attr_class",
watchChildren: true,
callback: function (data, i) {
// console.log("Класс был изменен");
// Ставим прилоадер как изображение бекграунда
$('.modal-wrapper.styled .modal').css('background','white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll');
// Если контент загружен убиваем прилоадер
if ($('.modal-content-post-wrapped').is('.load')) {
$('.modal.show').css('background','white');
// console.log("Контент загружен");
}
}
});
});
</script>

CSS стили для реализации всплывающих окон WP Post Popup

/*Google Recapcha V2 for WP Recall*/
/* START */

@media screen and (min-width:338px){

.panel_lk_recall .form-tab-rcl{
min-width: 338px;
}

}
/* END */
/*Google Recapcha V2 for WP Recall*/

/* Модальное окно ЛК
START
*/
.modal.show {
max-width: 650px;
}
.modal.show .kk-star-ratings.bottom-right.rgt{
display: none;
}

/*Table*/
.modal.show table{
border-collapse: separate;
max-width: 100%;
overflow: auto;
table-layout: fixed;
border: none;
width: auto;
}

.modal.show table th{
background: #F8F0F8;
padding: 17px 10px;
vertical-align: middle;
color: #7F617E;
font-size: 12px;
text-align: left;
}
.modal.show table th:first-child{
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
.modal.show table th:last-child{
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
.modal.show table th.th-border{
border-left: 1px solid #ECE1EC;
}

.modal.show table td{
color: #424242;
font-size: 13px;
border-bottom: 1px dashed #E5E5E5;
/* padding: 10px 5px 5px 10px;*/
padding: 10px 5px 5px 4px;
text-align: left;
}
.modal.show table tr:last-child td{
border-bottom: none;
padding-bottom: 20px;
}
.modal.show table td{
border-right: 1px solid #F7F7F7;
}
.modal.show table td:last-child{
border-right: none;
}
.modal.show table tr:first-child td{
padding-top: 20px;
}
/* Модальное окно ЛК
END
*/ 

Источник записи: