Ctools форма в модальном окне

published 01 April 2012

И так детки сегодня я расскажу как сделать форму в модальном окне с помощью ctools.

Для простоты будем выводить форму логина в модальном окне.

Для начало создадим info файл для нашего модуля (ul_modal.info):

; $Id$
;; название модуля
name = User Form Modal
;; описание
description = User Form in modal
;;
package = J Custom Modules
;; версия ядра
core = 7.x
;; зависимость
dependencies[] = user
dependencies[] = ctools
;; файлы модуля
files[] = ul_modal.module
;; версия модуля
version = "7.x-dev"

Далее начнем писать основную часть (ul_modal.module). Для начало нам нужно зарегистрировать адрес в меню для нашей формы:

/**
* hook_menu()
*/
function ul_modal_menu() {
$items = array();
$items['ul_modal/%ctools_js'] = array (
'page callback' => 'ul_modal_ctools_form',
'page arguments' => array(1),
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);
return $items;
}

Ничего особенного здесь нет, не буду уходить в подробности. Далее напишем коллбэк ul_modal_ctools_form:

function ul_modal_ctools_form($js = NULL) {
//проверяем запрос от js или нет, если нет рендерим форму на странице
return drupal_get_form('user_login');
}
//подключаем ctools скрипты
ctools_include('modal');
ctools_include('ajax');
ctools_modal_add_js();
ctools_add_js("ajax-responder");
//прописываем нужные параметры нашей форме
$form_state = array(
'title' => t('User login'),
'ajax' => TRUE,
);
//получаем форму форму для вывода через drupal ajax
$commands = ctools_modal_form_wrapper('user_login', $form_state);
//если форма успешно отправлена
if (!empty($form_state['executed'])) {
// We'll just overwrite the form output if it was successful.
$commands = array();
//сообщение об успешной отправке (тайтл, сообщение)
$commands[] = ctools_modal_command_display(t("Sending form"), "Вхожу...");
//грубо говоря закрываем форму
$commands[] = ctools_ajax_command_reload();
}
//выводим все в json для ajax
print ajax_render($commands);
exit;
}

Следующем шагом будет подключение необходимых скриптов на сайте, для этого обычно используется хук init. Наверное будет правильно не подключать скрипты если мы залогинины, так что добавим проверку:

/**
* Add js to page
*
*/
function ul_modal_init() {
//проверяем залогинины или нет, если да то выходим
global $user;
if ($user->uid != '0') {
return ;
}
//подключаем скрипты
// Include the CTools tools that we need.
ctools_include('modal');
ctools_include('ajax');

// Add CTools' javascript to the page.
ctools_modal_add_js();
ctools_add_js('ajax-responder');
//создаем настройки темы
// Create our own javascript that will be used to theme a modal.
$modal_style = array(
'ul_modal' => array(
//можно сделать фиксированный размер окно
/*'modalSize' => array(
'type' => 'fixed',
'width' => 500,
'height' => 300,
),*/
'modalOptions' => array(
'opacity' => .5,
'background-color' => '#000',
),
'animation' => 'fadeIn',
//название нашей темы
'modalTheme' => 'CToolsULModal',
//прописываем картинку и тайтл окна для прелоода
'throbber' => theme('image', array('path' => ctools_image_path('ajax-loader.gif', 'ul_modal'), 'alt' => t('Loading...'), 'title' => t('Loading'))),
),
);
//подключаем настройки темы
drupal_add_js($modal_style, 'setting');
//подключаем наш js
ctools_add_js('ul_modal', 'ul_modal');
//подключаем наш css
ctools_add_css('ul_modal', 'ul_modal');
}

Здесь стоит обратить внимание на несколько моментов, при подключение скриптов/стилей через функции ctools_add_js()/ctools_add_css() не нужно прописывать путь до них просто первым параметром пишем название модуля, вторым имя файла, и третьем, название папки с файлами, если они отключаются от дефолтных js/css. Про ctools_image_path() аналогично.

Создадим шаблон нашего модального окна, файл ul_modal.js и положим его в папочку js с нашим модулем :

/**
* Provide the HTML to create the modal dialog.
*/
//прошу обратить внимание, в конце название переменной - название нашей темы
Drupal.theme.prototype.CToolsULModal = function () {
var html = '';
//необходимая часть
html += '<div id="ctools-modal">';
//тут наш html
html += ' <div id="ul_modal-block" class="ul_modal-block ">';
//тут вставляется тайтл оставляем без изменений
html += ' <span id="modal-title" class="modal-title"></span>';
//кнопка закрытия окна
html += ' <span class="popups-close"><a class="close" href="#"></a></span>';
//тут наш html
html += ' <div class="clear-block"></div>';
//далее выводиться контент
html += ' <div class="popups-container">';
html += ' <div class="modal-scroll"><div id="modal-content" class="modal-content popups-body"></div></div>';
html += ' </div>';
//тут наш html
html += ' <div class="clearboth"></div>';

html += ' </div>';
html += '</div>';

return html;

}

Этот шаблончик можно переделывать как душе угодно главное оставить блоки с нужными id для вставки контента (ctools-modal, modal-title, modal-content ...)

Практически все готово, осталось вывести ссылку на нашу форму, для простоты будем выводить в блоке:

Обращаем внимание, в классе должно содержаться название наших стилей ctools-modal-ul_modal, что мы делали при подключение скриптов.

Последнее прописываем стили, в файле ul_modal.css в папочке css нашего модуля:

.star {
color: red;
}
#ul_login-block {
position: fixed;
left: 50%;
margin-left: -250px;
width : 500px;
top: 10%;
z-index: 10000;
background: #fff;
padding: 25px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-align: left;

}
.popups-close .close {
position: absolute;
width: 25px;
height: 25px;
/* background: white;*/
right: 10px;
top: 10px;
display: block;
background: transparent url(/modules/overlay/images/close.png) no-repeat 0 0;
}
#modal-title {
font-size: 16px;
font-weight: bold;
}

#ul_login-block .messages {
font-size: 11px;
}

Вот, что у меня получилось в итоге:

P.S. Для более подробного знакомства можно посмотреть модуль Chaos Tools (CTools) AJAX Example, входящий в ctools.

You are here

Ctools форма в модальном окне