Заставляем Drupal выводить messages во всплывающих окнах с помощью JQuery UI Dialog

Далее в читаемой вами сейчас статье будет приведен пример решения задачки по выводу абсолютно ВСЕХ системных сообщений CMS /CMF Drupal во всплывающих попап-окошках. Делать все я буду с помощью программного кода на JavaScript с использованием возможностей библиотеки JQuery UI. Кстати последняя уже частично встроена в ядро движка.

1. Подключите диалоговые окна JQuery UI. Сделать это можно единственной строчкой PHP-кода:

drupal_add_library('system', 'ui.dialog');

В каком хуке? Этого я пояснять не буду, а то получается совсем уж халява, — документацию тоже надо почитывать.

2. В каталоге темы создайте файл скрипта на JavaScript, куда вставьте такие вот строчки:

jQuery(function($) {

    /*** Системные сообщения: ***/
    var messages_block = $('.messages');
    var i = 0;
    var iOpen = false;
    if ($(messages_block).length > 0) {

        messages_block.each(function(i) {
            if (i == 0)
                iOpen = true;
            else
                iOpen = false;
            $(messages_block[i]).dialog({
                autoOpen: iOpen,
                title: 'Сообщение системы!',
                minHeight: '85',
                minWidth: '320',
                resizable: false,
                close: function(event, ui) { 
                    $('#page').show();
                    $(messages_block[++i]).dialog({
                        autoOpen: true,
                        title: 'Сообщение системы!',
                        minHeight: '85',
                        minWidth: '320',
                        resizable: false,
                        open: function(event, ui) {
                            $('.ui-widget-overlay').bind('click', function() {
                                $(messages_block[i]).dialog('close');
                            });
                        },
                        modal: true
                    });
                },
                open: function(event, ui) {
                    $('.ui-widget-overlay').bind('click', function() {
                        $(messages_block[i]).dialog('close');
                    });
                },
                modal: true
            });
        })

    }

});

Пожалуй я вкратце поясню вам, как работает сей механизм. Итак, читаем внимательно:

• В цикле обходим все имеющиеся на веб-странице сообщения. В данном случае это элементы с классом .messages.
• Сперва показываем только первое найденное сообщение.
• Затем при закрытии (close) первого сообщения показываем следующее по списку и т.д.
• Для определения того, какое окошко будет показано, а какое скрыто манипулируем свойством autoOpen.

Вот так это будет выглядеть:

* * *

Разумеется данный способ не является единственным, и вы можете его использовать или не использовать, — решать вам. Процесс темизации а-ля стилизации таких диалоговых окон на JQuery UI  выходит за рамки приведенного материала.