У мене є форма, і я використовую Drupal 7. Мені потрібно показувати цю форму у спливаючому вікні, коли користувач натискає посилання. Потім користувач повинен мати можливість заповнити форму, перебуваючи у спливаючому вікні. Я можу використовувати що-небудь на зразок Colorbox, модалі чи що завгодно. Мені просто хотілося дізнатись, який варіант кращий та які у мене варіанти для Drupal.
Відповіді:
Зараз я знаю 2 хороших варіанти: iframe (наприклад, у кольоровій коробці) та 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 має тільки ті повідомлення, заголовок і зміст друкованих.
Це вже працює, але я зіткнувся з проблемою із веб-формами: "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 за тим , що ви можете перейти на замість.
Бонусні бали за подачу патча з підтримкою нової форми, якщо ви пишете його. ;)
Я вважаю, що Простий діалог - це чудовий спосіб надання форм у Модалі. Він має перевагу у використанні інтерфейсу jQuery, який є в основі.
Все, що вам потрібно зробити - це надати посилання на форму з деякою додатковою інформацією. Я робив це двома способами:
Вам потрібний модуль https://drupal.org/project/popup_forms , але для його застосування потрібно виконати деяке програмування (тобто його неможливо просто налаштувати через адміністраторський інтерфейс).