Popup в Drupal 7. Модальные окна как элемент улучшения юзабилити.

Опубликовано Опубликовано в рубрике Drupal, PHP

Идея окна в окне уже достаточно стара, но до сих пор не утратила своей актуальности. К сожалению, сейчас многие используют popup-окна в целях, не направленных на создание СДЛ («сайта для людей»). Но сегодня я расскажу о том, как можно сделать удобную менюшку на Drupal 7 при помощи popup окна, созданного модулем Lightbox 2.

Не секрет, что Lightbox уже давно используется не только для красивого вывода изображений в фото галереях. Сейчас в него можно легко вывести содержимое сайта.

Допустим, у нас есть пресловутый каталог стран и городов. Мы находимся на страничке страны, где изложена подробная информация о ней. Утяжелять её списком городов не очень хочется. Поэтому его удобно вывести в popup-окне. В нем список городов со ссылками генерируется точно так же, как и при выводе на обычную страницу. Перенесем его из основного документа в подключаемый шаблон, а в верхнюю часть page.tpl.php добавим следующие строки.

if (<условие: в URL вызывается страница списка городов>)
{
include('<файл логики построения списка.php>');
}
else
{
<здесь находится старое содержимое файла page.tpl.php>
}

Теперь наши списки будут генерироваться вне основного шаблона. Но пока они все равно выводятся в основном окне браузера.
Скачаем модуль Lightbox2 здесь и установим его в системе.

На странице информации о стране обязательно есть ссылка на список городов

Список городов страны

Для того, чтобы содержимое выводилось в модальном окне, необходимо добавить к ссылке атрибут, который становится доступен при подключенном модуле Lightbox.

Список городов страны

Отлично! Теперь при вызове списка страничка выводится в popup-е. Но это ещё не все. Попробуем выбрать какой-нибудь город и кликнуть его. Забавно, не правда ли? Теперь вся работа происходит в том же фрейме. Это не очень хорошо, точнее, очень НЕхорошо. Поэтому научим нашу систему показывать страницу выбранного города в родительском окне. Для этого к каждой ссылке города (надеюсь, у Вас списки все таки генерятся автоматически =) ) добавляем атрибут target:

Бобруйск

Вуаля! Теперь при выборе города модальное окно закрывается, а информация о самом городе загружается в основное окно!

Задача решена!

Безошибочного кода Вам!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *