CTools вывод блока в модальном окне
При помощи API модуля ctools можно выводить кастомные модальные окна. Рассмотрим простой пример вывода блока в модальном окне. Для этого нам потребуется создать свой кастомный модуль. Назовем его custom.module (не забудьте создать custom.info файл, с помощью которого, drupal будет знать о существовании нашего модуля).
Начнем c hook_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():
$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() подключаем необходимые файлы:
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 (его можно править как захотим):
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
- 4757 просмотров
Разделы
Комменты
-
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 для прохода по всем совпадениям! →
Комментарии (1)
Добрый день. Как определить блок в этом же модуле, а не создавать его в админке?