Вед-дев, Сео, Манимейкинг

CTools вывод блока в модальном окне

При помощи API модуля ctools можно выводить кастомные модальные окна. Рассмотрим простой пример вывода блока в модальном окне. Для этого нам потребуется создать свой кастомный модуль. Назовем его custom.module (не забудьте создать custom.info файл, с помощью которого, drupal будет знать о существовании нашего модуля).

Начнем c hook_menu():

function custom_menu() {
  $items = array();

  $items['test/%ctools_js'] = array(
    'page callback' => 'test_page',
    'page arguments' => array(1),
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );

  return $items;
}

callback функция test_page():

function test_page($js = NULL) {
  $block = block_load('system', 'powered-by');
  $block_content = _block_get_renderable_array(_block_render_blocks(array($block)));

  $output = render($block_content);
  $title = 'Our title';
  if ($js) {
    ctools_include('ajax');
    ctools_include('modal');
    ctools_modal_render($title, $output);
    // above command will exit().
  }
  else {
    drupal_set_title($title);
    return $output;
  }
}

Для того чтобы наша ссылка работала, через hook_init() подключаем необходимые файлы:

function custom_init() {
  if (drupal_is_front_page()) {
    ctools_include('modal');
    ctools_modal_add_js();

    // Create our own javascript that will be used to theme a modal.
    $custom_style = array(
      'custom-modal-style' => array(
        'modalSize' => array(
          'type' => 'fixed',
          'width' => 1100,
          'height' => 325,
          'contentRight' => 0,
          'contentBottom' => 0,
        ),
        'modalOptions' => array(
          'opacity' => .8,
          'background-color' => '#000000',
        ),
        'animation' => 'fadeIn',
        'modalTheme' => 'custom_modal',
        'closeImage' => theme('image', array('path' => ctools_image_path('modal-close.png', 'custom'), 'alt' => t('Close window'), 'title' => t('Close window'))),
      ),
    );

    // Add the settings array defined above to Drupal 7's JS settings:
    drupal_add_js($custom_style, 'setting');
    // The function below assumes the custom_modal.js file resides in [module_dir]/js
    ctools_add_js('custom_modal', 'custom');
  }
}

Создаем файл custom_modal.js в директории нашего модуля /custom/js/custom_modal.js (его можно править как захотим):

(function ($) {
    Drupal.theme.prototype.custom_modal = function () {
    var html = ''
    html += '  <div id="ctools-modal">'
    html += '    <div class="ctools-modal-content">' // panels-modal-content
    html += '      <div class="modal-header">';
    html += '        <a class="close" href="#">';
    html +=            Drupal.CTools.Modal.currentSettings.closeText + Drupal.CTools.Modal.currentSettings.closeImage;
    html += '        </a>';
    html += '        <span id="modal-title" class="modal-title"> </span>';
    html += '      </div>';
    html += '      <div id="modal-content" class="modal-content">';
    html += '      </div>';
    html += '    </div>';
    html += '  </div>';

    return html;
  }
})(jQuery);

Ссылку выводим в page.tpl.php:

<a href="/test/nojs" class="ctools-use-modal ctools-modal-custom-modal-style">#</a>

Чтобы работал ctools нужно обязательно добавить класс "ctools-use-modal", а для того чтобы модальное окно было в нашем кастомном стиле, то необходимо добавить еще один класс "ctools-modal-[название вашего стиля]". В нашем примере, стиль называется "custom-modal-style", поэтому класс нужно создать такого вида: ctools-modal-custom-modal-style

Более подробную документацию о модальных окнах можно прочитать в документации модуля ctools: ctools/help/modal.html



Комментарии (1)

Добрый день. Как определить блок в этом же модуле, а не создавать его в админке?

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 11 месяцев 2 дня назад
    Спасибо. С Новым Годом! 
  • Den 11 месяцев 3 недели назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 11 месяцев 4 недели назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 1 год 3 недели назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 1 год 3 недели назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 1 год 3 недели назад
    захожу на mysql через ssh по команде  
  • admin 1 год 3 недели назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 1 год 3 недели назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 1 год 1 месяц назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 1 год 2 месяца назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!