При отображении стандартных системных сообщений на страницах сайта под управлением 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 во всплывающем окне.