Темизация модального Ctools окна

В предыдущей статье я рассматривал как сделать всплывающее модальное окно с задержкой. В качестве модального окна использовалось Ctools Modal API. Триггером для вызова модального окна служит ссылка, которая имеет класс .ctools-use-modal. Для добавления настроек для модального окна нужно ссылке добавить дополнительный класс .ctools-modal-my-simple-modal-style, где my-simple-modal-style - имя объекта, который нужно добавить в Drupal.settings. Для этого нужно при инициализации страницы в hook_init добавить следующий код:


$custom_style = array(
    'my-simple-modal-style' => array(
      'modalSize' => array(
        'type' => 'scale', // Тип модального окна: фиксированный (fixed) или резиновый(scale).
        'width' => .4, // Ширина окна(если fixed, то в px).
        'height' => .4, // Высота окна(если fixed, то в px).
        'addWidth' => 0,
        'addHeight' => 0,
        'contentRight' => 0, // Отступ контента от края окна справа при необходимости
        'contentBottom' => 0, // Отступ контента от края окна снизу при необходимости
      ),
      'modalOptions' => array(
        'opacity' => (float) 0.5, // Прозрачность фона.
        'background-color' => '#c2c2c2', // Цвет фона.
      ),
      'closeText' => '', 
      'loadingText' => '', 
      'animation' => 'fadeIn', // Эффект появления  окна(fadeIn, slideDown, show).
      'animationSpeed' => 400, // Скорость анимации( slow, medium, fast или в мс).
      'modalTheme' => 'mymodule_modal', // Имя темы модального окна
      'throbber' => theme('image', array(
        // Файл для троббера будет лежать в папке /images  модуля
        'path' => ctools_image_path('ajax-loader.gif', 'mymodule'),
        'alt' => t('Loading...'), 'title' => t('Loading'))
      ),
      'closeImage' => theme('image', array(
        'path' => ctools_image_path('modal-close.png', 'mymodule'),
        'alt' => t('Close window'),
        'title' => t('Close window'))
      ),

  ),
);
drupal_add_js($custom_style, 'setting');

// Подключаем js файл  ctools.js - должен лежать в папке /js модуля
ctools_add_js('ctools', 'mymodule');
// Подключаем css файл  ctools.css - должен лежать в папке /css модуля
ctools_add_css('ctools', 'mymodule');

Далее создаем файл ctools.js в папке /js модуля и там добавляем тему для модального окна с названием mymodule_modal, имя которой описано было ранее в настройках модального окна. В Drupal.theme.prototype.mymodule_modal задаем html код модального окна , при этом не трогая разметку, которая изначально описана в Drupal.theme.prototype.CToolsModalDialog в файле modal.js, лежащем в папке /js модуля ctools.


/**
 * Переписываем код окна определенный в Drupal.theme.prototype.CToolsModalDialog
 */
(function ($) {
    Drupal.theme.prototype.mymodule_modal = function () {
        var html = '';
        html += '<div id="ctools-modal" class="popups-box">';
        html += '  <div class="ctools-modal-content ctools-modal-mymodule-modal-content">';
        html += '    <span class="popups-close"><a class="close" href="#">' + Drupal.CTools.Modal.currentSettings.closeImage + '</a></span>';
        html += '    <div class="modal-scroll"><div id="modal-content" class="modal-content popups-body"></div></div>';
        html += '  </div>';
        html += '</div>';
        return html;
    }
})(jQuery);

Далее создаем в папке /css модуля файл ctools.css, в котором прописываем стили для модального окна в соответствии с дизайном вашего сайта. Первоначальные стили прописаны в файле modal.css, который располагается в папке /css модуля ctools.