У меня есть форма, и я использую Drupal 7. Мне нужно показать эту форму во всплывающем окне, когда пользователь нажимает на ссылку. Затем пользователь должен заполнить форму во всплывающем окне. Я могу использовать все, что угодно, например, Colorbox, модалы или что угодно. Я просто хотел узнать, какой вариант лучше и какие у меня есть варианты для Drupal.
Есть 2 хороших варианта, которые я знаю в настоящее время: iframe (например, в colorbox) и CTools. Какой вариант использовать, зависит от обстоятельств. Я думаю, эта информация, которую я нашел в файле CTools modal.html, выявляет основное отличие:
CTools предоставляет простой модал, который можно использовать как всплывающее окно для размещения форм. Он отличается от обычных модальных фреймворков тем, что не выполняет свою работу через iframe. Это и преимущество, и недостаток. Iframe просто отображает обычные страницы в суб-браузере, и они могут делать свое дело. Это значительно упрощает размещение произвольных страниц и форм в модальном режиме. Тем не менее, iframe не очень хорошо передает изменения на главной странице, поэтому вы не можете открыть модал, заставить его выполнить какую-то работу, а затем изменить страницу.
У меня нет личного опыта работы с CTools на эту тему, поэтому я не могу ничего добавить к этому, но я реализовал метод iframe в нескольких проектах. В самой последней я использовал плагин Colorbox, чтобы показать несколько форм, созданных с помощью модуля Webform, во всплывающем окне . Я добавлю пример кода здесь на случай, если есть интерес.
Ссылка на форму:
<a class="colorbox_form" href="'.url('node/5').'">'.t('Send message').'</a>Javascript код для открытия связанного адреса во всплывающем окне:
if ($('a.colorbox_form').length > 0) {
var link = $("a.colorbox_form").attr('href');
link = link.concat('?colorbox=true');
// colorbox=true is attached for later use (read below).
$("a.colorbox_form").attr('href', link);
$("a.colorbox_form").colorbox({iframe:true, width:500, height:450});
}
В файле шаблона темы:
function mytheme_preprocess_page(&$variables) {
// Different template and additional stylsheet for colorbox content.
if (isset($_GET['colorbox']) && $_GET['colorbox'] == TRUE) {
$variables['theme_hook_suggestions'] = array('page__iframe'); // page--iframe.tpl.php
drupal_add_css(path_to_theme() .'/iframe.css');
$variables['styles'] = drupal_get_css();
}
}
Я добавил colorbox = true к ссылкам, используя javascript, чтобы пользователи с отключенным javascript увидели форму с обычным шаблоном. В шаблоне iframe печатаются только сообщения, заголовок и содержимое.
Это уже работает, но я столкнулся с проблемой с Webforms: «colorbox = true» не был сохранен, когда форма была отправлена. Моя попытка это исправить:
function mymodule_form_alter(&$form, &$form_state, $form_id) {
if (isset($_GET['colorbox']) && $_GET['colorbox'] == TRUE) {
// The id-s of the forms that are possibly shown within a popup.
$form_ids = array('webform_client_form_2', 'webform_client_form_4');
if (in_array($form_id, $form_ids)) {
$form['#submit'][] = 'mymodule_webform_submit';
}
}
}
function mymodule_webform_submit(&$form, &$form_state) {
//drupal_set_message('<pre>'.var_export($form_state['redirect'], TRUE).'</pre>');
if (!isset($form_state['redirect'])) {
$form_state['redirect'] = array($_GET['q'], array('query' => array('colorbox' => 'true')));
}
else {
$form_state['redirect'][1]['query'] = array('colorbox' => 'true');
}
}
Используйте CTools, которые могут вставлять форму в модальный режим, когда пользователь нажимает на ссылку.
Пожалуйста, проверьте следующий учебник: Вставьте форму во всплывающее модальное окно с помощью CTools и Drupal 7, что упрощает этот процесс в несколько шагов.
В основном вам нужно определить ваш hook_menu()обратный вызов для вашей модальной формы:
$items['mymodule/%ctools_js'] = array(
'page callback' => 'mymodule_callback',
'page arguments' => array(1),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
затем создайте генератор ссылок, который возвращает код HTML:
/**
* Helper function to make a link.
*/
function _mymodule_make_link($link_text = '') {
// Set a default value if no text in supplied.
if (empty($link_text)) {
$link_text = 'Magical Modal';
}
return '<div id="magical-modal-link">' . l($link_text, 'mymodule/nojs', array('attributes' => array('class' => 'ctools-use-modal'))) . '</div>';
}
так что это может быть использовано в обратном вызове вашей страницы, например:
/**
* An example page.
*/
function mymodule_page() {
// Load the modal library and add the modal javascript.
ctools_include('modal');
ctools_modal_add_js();
return _mymodule_make_link('Magical modal');
}
Когда пользователь нажимает на ссылку, он делает запрос либо в ( /mymodule/ajaxили /mymodule/nojsв случае nojs), поэтому следующий обратный вызов обрабатывает создание модального:
/**
* Ajax menu callback.
*/
function mymodule_callback($ajax) {
if ($ajax) {
ctools_include('ajax');
ctools_include('modal');
$form_state = array(
'ajax' => TRUE,
'title' => t('MyModule Modal Form'),
);
// Use ctools to generate ajax instructions for the browser to create
// a form in a modal popup.
$output = ctools_modal_form_wrapper('mymodule_form', $form_state);
// If the form has been submitted, there may be additional instructions
// such as dismissing the modal popup.
if (!empty($form_state['ajax_commands'])) {
$output = $form_state['ajax_commands'];
}
// Return the ajax instructions to the browser via ajax_render().
print ajax_render($output);
drupal_exit();
}
else {
return drupal_get_form('mymodule_form');
}
} Теперь вам просто нужно создать форму и обработчик отправки, как показано ниже:
/**
* Drupal form to be put in a modal.
*/
function mymodule_form($form, $form_state) {
$form = array();
$form['new_link_text'] = array(
'#type' => 'textfield',
'#title' => t('Link text'),
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Submit'),
);
return $form;
}
/**
* Drupal form submit handler.
*/
function mymodule_form_submit(&$form, &$form_state) {
// Generate the new link using the submitted text value.
$link = _mymodule_make_link($form_state['values']['new_link_text']);
// Tell the browser to close the modal.
$form_state['ajax_commands'][] = ctools_modal_command_dismiss();
// Tell the browser to replace the old link with the new one.
$form_state['ajax_commands'][] = ajax_command_replace('#magical-modal-link', $link);
}Чтобы проверить это, перейдите по /mymodule/pageссылке : где вы должны увидеть ссылку «Магический модальный», которая должна показать вам модальную форму после нажатия.
Я бы начал смотреть на модальную форму вместо Colorbox. Он существует, потому что использование Colorbox с формами работает очень плохо.
В модальной форме Ctools выполняет всю работу в фоновом режиме, которая имеет надлежащую поддержку для обработки форм, которая просто не принадлежит Colorbox. Это также означает, что если вам нужно «модать» неподдерживаемую форму, вы всегда будете знать, что благодаря Ctools есть надежный API, на который вы можете перейти вместо этого.
Бонусные баллы за подачу патча с поддержкой новой формы, если вы его напишите. ;)
Я считаю, что Simple Dialog - это отличный способ предоставить формы в модальности. Преимущество использования jQuery UI в ядре.
Все, что вам нужно сделать, это предоставить ссылку на форму с дополнительной информацией. Он предоставляет простой метод, основанный на классах и тегах rel, или метод theme для более точного управления. Я сделал это двумя способами:
источник
Модуль, который вам нужен, это https://drupal.org/project/popup_forms , но вам нужно немного программировать, чтобы применить его (то есть его нельзя просто настроить через интерфейс администратора).
источник