Очень полезная штука эти модальные окна. Идеальное решение для вывода карточки товара или показа блока без необходимости перехода по URL.
Как сделать модальное окно на Drupal 8?
Как по мне, все зависит от того, что вы хотите. Вам нужно открыть определенный контентный блок страницы в модальном окне или целую ноду? Вам нужно вывести форму авторизации или открыть изображение?
Итак, "не ультимативные" решения от "не разработчика" Drupal 8:
Изображение в окне
Используйте модуль Colorbox (не забудьте загрузить библиотеку к модулю). Он позволяет открывать изображения в модальном окне. Некоторые изображения проектов drupal.org с недавнего времени открываются в окне.
При чем очень удобно. Настройки позволяют задавать значения, как для отдельного изображения, так и для галереи фото. Мы можем выбрать форматы для первого изображения, для изображения в окне и для всех остальных изображений галереи. Чтобы настроить открытие изображения в модальном окне, после активации модуля и загрузки нужных для его работы библиотек, перейдем в настройки того типа сущности, где хотим использовать модальные окна для изображений. Будь это типы параграфа или типы материалов, нам нужны параметры отображения. Из списка форматеров для поля изображения выбираем Colorbox. Затем настраиваем показ изображений так, как нам нужно.
где,
- Image style for content - стиль изображения галереи;
- Image style for first image in content - стиль для первого изображения в массиве;
- Image style for Colorbox - стиль текущего открытого изображения в colorbox.
Кстати говоря, применять Colorbox можно и в представлениях. Там мы добавляем нужное нам поле и задаем желаемые настройки.
Форма авторизации в окне
Для открытия форм авторизации в модальном окне Drupal мы можем использовать несколько модулей.
Fancy Login - добавляет блок который можно поместить в регион темы и использовать, как для авторизации, так и для регистрации.
Account Modal - еще один рабочий модуль, который позволяет помимо формы входа открывать в окне формы регистрации, смены пароля и профиля пользователя. Все настройки модуля доступны на его странице конфигурации по адресу Configuration - User interface - Account modal. Удобно не правда-ли?
Содержимое в модальном окне
Есть на свете удобный модуль для отображения контента в модальном окне. Называется Modal Page. По заявлению разработчиков с его помощью можно добавлять окна для изображения на конкретных страницах, тем самым показывая пользователю информацию исходя из того, на какой странице он находится.
Так же есть модуль Modal Blocks заявляющий те же функции что и Modal Page.
Но если вам тошно от модулей и ваша душа не ровно дышит к коду, то при условии наличия у вас сайта на Bootstrap 3 можно добавить окно с его помощью. Для этого посетите страницу. Одна только проблема у меня возникла с юзанием bootstrap скриптов - формы не всегда корректно отображаются. Вот например:
Модальное окно без использования bootstrap 3 демонстрирует нам кнопку "Добавить в корзину" и не задействует bootstrap jQuery UI Dialog Bridge (опция в настройках модального окна темы на bootstrap 3). Окно же в стиле bootstrap обладает более привлекательной оберткой, но с очевидными ошибками. Я не программист, с конфликтами скриптов разобраться не сумел :), но как-то так.
Пункты меню в модальном окне
Извращаясь с модальными окнами мы можем ссылки меню открывать в модальном окне. Просто ставим модуль Menu Link Modal. А при создании пункта меню ставим галочку о работе ссылки в качестве модального окна. Используем и обязательно отписываемся о результатах работы в комментариях к этой статье.
Страница в модальном окне
Drupal 8 позволяет запускать модальные окна откуда угодно. Для активации достаточно создать ссылку в HTML и указать в ней необходимый класс и атрибут data:
<a href="/page/modal" class="use-ajax" data-dialog-type="modal">Страница в модальном окне</a>
Естественно, это не все способы активации и использования модальных окон в Drupal 8. Я показал, что использую сам и надеюсь, контент был вам полезен. Если так, то обязательно ставьте свой щедрый лайк и делитесь статьей с единомышленниками. А я обязательно буду дополнять эту статью новыми знаниями и решениями по мере поступления.
Полезные ссылки:
Drupal 8: Modal API или как работать с модальными\диалоговыми окнами.