Joomla: отображение системных сообщений во всплывающем окне

При отображении стандартных системных сообщений на страницах сайта под управлением Joomla, генерируется следующий HTML-код:

HTML

<div id="system-message-container"> 
   <div id="system-message"> 
      <div class="alert alert-message"> 
	<a class="close" data-dismiss="alert"> ×</a> 
	<h4 class="alert-heading"> Сообщение</h4> 
            <div> 
	    <p> Спасибо за ваше письмо!</p> 
	</div> 
      </div> 
    </div> 
</div>  

К системным сообщениям, в частности, относится сообщение, которое появляется после отправки данных через форму обратной связи на странице с компонентом com_contact. Место где оно появляется определяется в шаблоне сайта. Для его вставки используется следующая директива:

Joomla API

<jdoc:include type="message" />

Стандартный вид сообщения не очень привлекательный и, как правило, не совпадает с дизайном страниц вашего сайта. Его, конечно же, можно стилизовать с помощью 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

<link rel="stylesheet" type="text/css" href="/<?php echo $this-> baseurl?> /templates/<?php echo $this-> template; ?> /css/jquery.fancybox.css" media="all" /> 

Файл jquery.fancybox.pack.js подключаем после подключения библиотеки jQuery.

PHP

<script src="/<?php echo $this-> baseurl?> /templates/<?php echo $this-> template; ?> /script/jquery.fancybox.js"> </script> 

Теперь можно перейти к написанию пары строк javaScript, чтобы подключить fancyBox и указать, что показывать во всплывающем окне и главное, в какой момент это делать. Дело в том, что блок-контейнер (div#system-message-container) для системных сообщений генерируется в коде страницы при каждом ее показе. Правда если сообщений нет — он пуст и не содержит в себе других элементов. Если мы вызовем без условий, то при каждом обращении к сайту, будем видеть пустое всплывающее окно. Поэтому код для показа сообщений будет следующий:

JavaScript

jQuery(document).ready(
 function(){            
    var $ = jQuery;                                                      
	var messLgth = $('#system-message-container').children().length;
	if(messLgth !== 0){
		$.fancybox.open(
			$('#system-message-container'),{
					padding : 0, 
					closeBtn: false
				}
		);
		
		$('a.close').on('click', function(){
			$.fancybox.close();
		});
	}
 });

Код получился совсем несложный: сначала проверяем есть ли потомки у контейнера для системных сообщений. Если да, вызываем метод $.fancybox.open. В качестве параметров передаем объект с 2 свойствами: первый параметр - убирает отступы, второй — скрывает кнопку «закрыть». Дело в том, что в блоке для показа системного сообщения уже есть ссылка (a.close), при клике на которой всплывающее окно должно закрываться. Следующие 2 строчки кода, как раз и реализуют такой функционал. Ну вот и весь скрипт. Получилось довольно «скромно».

Помещаем этот код в файл и сохраняем его. Я назвал его script.js и разместил в той же папке (script), куда разархивировал jquery.fancybox.js. Подключить этот файл в шаблоне сайта необходимо следующей строкой после подключения jquery.fancybox.js.

PHP

<script src="/<?php echo $this-> baseurl?> /templates/<?php echo $this-> template; ?> /script/script.js"> </script> 

Теперь после проделанной работы, мы уже можем увидеть результат. Системное сообщение после заполнения и отправки формы обратной связи должно открыться с помощью fancyBox. Если, конечно, вы все правильно сделали.

Осталось только немного стилизовать блок с сообщением, добавив немного CSS. У меня получился следующий набор CSS-правил:

CSS

/*системные сообщения*/
#system-message-container{width:300px;}
#system-message{}
.alert-message{position: relative; width:99%; margin-top:15px;}
a.close{position:absolute; top:-10px; right:5px; font-weight:bold; cursor:pointer; width:20px; height:20px; text-align: center;}
.alert-message h4{text-align: center; margin-bottom:10px;}
.alert-message p{font-size:.8em; text-align: center;}

Вы можете украшать блок на свой вкус. Вот таким простым способом мы смогли организовать показ системных сообщений на сайте под управлением Joomla во всплывающем окне.