Это пример всплывающего окна!

Равным образом повышение уровня гражданского сознания представляет собой интересный эксперимент проверки системы масштабного изменения ряда параметров. Дорогие друзья, новая модель организационной деятельности требует от нас анализа системы обучения кадров, соответствующей насущным потребностям. Значимость этих проблем настолько очевидна, что начало повседневной работы по формированию позиции играет важную роль в формировании соответствующих условий активизации?

Всплывающие (pop-up) окна, в определенных случаях, бывают весьма полезны на сайте. В них можно разместить информацию, которую пользователь может просмотреть не покидая основной веб-страницы.  Например, в такое окно удобно поместить политику конфиденциальности сайта или какой-либо дисклеймер не создавая под них отдельные станицы. В Divi, к сожалению, нет модуля позволяющего реализовать данный функционал. Поэтому веб-дизайнерам обычно приходится пользоваться плагинами сторонних разработчиков. Не всегда они бесплатные и уж точно не уменьшают нагрузку на сайт. Сегодня мы поговорим о способе создания всплывающих окон без использования каких-либо плагинов, опираясь только на ресурсы самой темы Divi. Дело в том, что модуль Image для показа изображений в лайтбоксе использует уже предустановленную библиотеку Magnific popup (кстати, разработанную киевлянином Дмитрием Семеновым). Ею мы и воспользуемся.

1.Открытие popup окна по клику на ссылку в посте или статье

Сначала сделаем окно, открывающееся по клику на обычной текстовой ссылке. Для этого в Divi builder создадим раздел с тремя модулями:

  • модуль Code – будет содержать скрипт создания pop up окна;
  • модуль Text – здесь расположим текстовую ссылку для раскрытия окна;
  • модуль Text – здесь будет содержаться контент отображаемый в окне.

Это будет выглядеть так:

В модуль Code вставляем следующие строки:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.divipopup').click(function(e) {
e.preventDefault();
jQuery.magnificPopup.open({
items: {src: jQuery(this).data('content-id')},
type: 'inline'
});
});
});
</script>

Этот код отслеживает клики на ссылки с классом divipopup и открывает объект указанный в идентификаторе  data-content-id. Внутрь первого текстового модуля помещаем следующую ссылку:

<a class="divipopup" href="#" data-content-id="#hello">Открыть окно</a>

В нашем случае идентификатор определен как  «hello” и при нажатии на ссылку будет вызван элемент с таким ID.   В качестве ссылки вполне можно использовать и изображение. Для этого внутри тега нужно указать источник этого изображения. Например:

<a class="divipopup" href="#" alt="" data-content-id="#hello">
<img src="http:/image.jpg" alt="Кликни здесь"></a>

Следующим шагом создаем собственно всплывающее окно.Для этого используем последний модуль Text. Открываем настройки модуля. Добавляем и форматируем контент который должен быть отображен в нашем всплывающем окне. Здесь же можно выбрать цвет фона. На вкладке Design можно поиграться тенями, выбрать анимацию при появлении окна и задать отступы (Custom Padding) от края окна до текста. Затем переходим на вкладку Advansed. Здесь  в поле CSS ID вставляем наш идентификатор hello, а в поле CSS Class mfp-hide. Определение этого класса важно, так как именно “mfp-hide” не дает отображать контент на странице до вызова pop-up окна. Сохраняем параметры модуля. Теперь клик по ссылке будет открывать всплывающее окошко с нашим содержимым.  По умолчанию, оно разворачивается на всю ширину экрана. Имеет смысл сделать его меньшей ширины. Кроме того, кнопку закрытия окна (в виде крестика) можно сделать чуть больше и контрастнее. Для этого перейдем в настройки темы Divi->Theme Options-> General  и в самом низу в поле Custom CSS добавим несколько строк:

/* ширина контейнера */
.mfp-content {max-width:600px;}

/* размер и цвет кнопки закрытия окна */
.mfp-close-btn-in .mfp-close {
color: #ffffff;
font-size: 35px;
top:0;
}

Как вариант, эти строки можно вставить в файл style.css дочерней темы.

Вот теперь все выглядит неплохо.

Открыть окно

 

2.Открытие pop-up окна через кнопку

Открыть pop-up окно так же можно и по клику на стандартную кнопку Divi.  Для этого варианта нужно несколько изменить код его вызова. В модуль Code вставляем (или добавляем, если хотим оставить возможность открытия окна через текстовую ссылку)  следующие строки:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.divipopup-2').click(function(e) {
e.preventDefault();
jQuery.magnificPopup.open({
items: {src: jQuery(this).attr('href')},
type: 'inline'
});
});
});
</script>

Вместо текстового модуля для ссылки открытия окна используем модуль Button. В нем прописываем следующие параметры: Button URL: #hello; CSS Class: divipopup-2 Теперь окно будет открываться при нажатии на кнопку.

В том случае, если окно должно открываться  не только в отдельной статье или посте, а вообще из любого места сайта (например, по ссылке «Политика конфиденциальности» расположенной в футере), код нужно вставлять уже не в модуль Code, а в хидер страницы. Для этого перейдем Divi->Theme Options->Integration и добавляем код в поле Add code to the < head > of your blog.