
При отображении стандартных системных сообщений на страницах сайта под управлением Joomla, генерируется следующий HTML-код:
HTML
К системным сообщениям, в частности, относится сообщение, которое появляется после отправки данных через форму обратной связи на странице с компонентом com_contact. Место где оно появляется определяется в шаблоне сайта. Для его вставки используется следующая директива:
Joomla API
Стандартный вид сообщения не очень привлекательный и, как правило, не совпадает с дизайном страниц вашего сайта. Его, конечно же, можно стилизовать с помощью CSS, но я предлагаю, кроме стилизации, еще и показывать его во всплывающем окне. При этом содержимое страницы должно быть затемнено. С этим прекрасно справится легендарный jQuery-инструмент под названием fancyBox.
Скачаем его и подключим в ваш шаблон сайта. Из скачанного архива вам понадобятся файлы: jquery.fancybox.pack.js, jquery.fancybox.css. Они находятся в папке source загруженного архива. Кроме них, возьмем все изображения и разархивируем их в папку images вашего шаблона. Файлы jquery.fancybox.pack.js и jquery.fancybox.css перенесите в соответствующие папки script и css. Причем файл jquery.fancybox.pack.js можно переименовать в jquery.fancybox.js.
В файле jquery.fancybox.css не забудьте заменить пути к изображениям на ваши. Затем подключим перечисленные файлы в шаблоне сайта (файл — index.php).
PHP
Файл jquery.fancybox.pack.js подключаем после подключения библиотеки jQuery.
PHP
Теперь можно перейти к написанию пары строк javaScript, чтобы подключить fancyBox и указать, что показывать во всплывающем окне и главное, в какой момент это делать. Дело в том, что блок-контейнер (div#system-message-container) для системных сообщений генерируется в коде страницы при каждом ее показе. Правда если сообщений нет — он пуст и не содержит в себе других элементов. Если мы вызовем без условий, то при каждом обращении к сайту, будем видеть пустое всплывающее окно. Поэтому код для показа сообщений будет следующий:
JavaScript
Код получился совсем несложный: сначала проверяем есть ли потомки у контейнера для системных сообщений. Если да, вызываем метод $.fancybox.open. В качестве параметров передаем объект с 2 свойствами: первый параметр - убирает отступы, второй — скрывает кнопку «закрыть». Дело в том, что в блоке для показа системного сообщения уже есть ссылка (a.close), при клике на которой всплывающее окно должно закрываться. Следующие 2 строчки кода, как раз и реализуют такой функционал. Ну вот и весь скрипт. Получилось довольно «скромно».
Помещаем этот код в файл и сохраняем его. Я назвал его script.js и разместил в той же папке (script), куда разархивировал jquery.fancybox.js. Подключить этот файл в шаблоне сайта необходимо следующей строкой после подключения jquery.fancybox.js.
PHP
Теперь после проделанной работы, мы уже можем увидеть результат. Системное сообщение после заполнения и отправки формы обратной связи должно открыться с помощью fancyBox. Если, конечно, вы все правильно сделали.
Осталось только немного стилизовать блок с сообщением, добавив немного CSS. У меня получился следующий набор CSS-правил:
CSS
Вы можете украшать блок на свой вкус. Вот таким простым способом мы смогли организовать показ системных сообщений на сайте под управлением Joomla во всплывающем окне.
Комментарии
RSS лента комментариев этой записи