Всплывающие окна

[Seopirat]

В скрипт MSE встроен быстрый, легкий и производительный плагин Magnific Popup, предназначенный для создания всплывающих окон и лайтбоксов. Созданные окошки полностью адаптивны и имеют гибкую настройку. Разберем алгоритм создания всплывающего окошка с использованием этого плагина:

1) Убедитесь, что в вашем шаблоне подключен файл стилей MSE

2) Создайте блок с нужным контентом, добавьте ему классы popup, white-popup, mfp-hide. Данные классы нужны для правильного отображения будущего окошка и адаптива. Блок рекомендуется размещать ближе к закрывающему тегу </body> и записать в отдельный файл шаблона. Немного позже мы рассмотрим пример стандартного окошка “Поделиться треком”.

3) Присвойте созданному блоку уникальный идентификатор, чтобы плагин мог найти его среди других блоков:

<div id="share-track" class="popup white-popup mfp-hide">
Содержимое окна..
</div>

4) Само окно создано, теперь необходимо произвести его вызов. Для вызова всплывающего окна используется ссылка (или любой другой тег с нужными атрибутами) с классом open-popup и атрибутом href, который указывает на нужное окно:

<a href="#share-track" class="open-popup">Открыть окно</a>

Готово! В такое окно можно разместить форму обратной связи, правила сайта, обращение к правообладателям или любой другой контент.


Поделиться треком
Рассмотрим создание окна “поделиться треком”. Начиная с версии MSE 1.3 данное окно уже добавлено в дефолтные шаблоны.

1) Убедитесь в подключенном файле стилей MSE

2) Подключите файл шаблона share.tpl (идет в комплекте со стандартными шаблонами) или же создайте на его основе свой файл.

3) Добавьте в файлы шаблона track-list.tpl и track-ajax.tpl в нужное место ссылку:

<a href="#share-track" class="track-item__share open-popup">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</a>

Готово. Вы великолепны!