J'ai un formulaire et j'utilise Drupal 7. Je dois afficher ce formulaire dans une fenêtre contextuelle lorsqu'un utilisateur clique sur un lien. L'utilisateur devrait alors être en mesure de remplir le formulaire dans la fenêtre contextuelle. Je peux utiliser n'importe quoi comme Colorbox ou modals ou quoi que ce soit. Je voulais juste savoir quelle est la meilleure option et quelles options ai-je pour Drupal.
Réponses:
Il y a 2 bonnes options que je connais actuellement: iframe (dans colorbox par exemple) et CTools. L'option à utiliser dépend des circonstances. Je suppose que ces informations que j'ai trouvées dans le fichier modal.html de CTools font ressortir la principale différence:
CTools fournit un modal simple qui peut être utilisé comme popup pour placer des formulaires. Il diffère des cadres modaux normaux en ce qu'il ne fait pas son travail via un iframe. C'est à la fois un avantage et un inconvénient. L'iframe rend simplement les pages normales dans un sous-navigateur et ils peuvent faire leur travail. Cela rend beaucoup plus facile de mettre des pages et des formulaires arbitraires dans un modal. Cependant, l'iframe n'est pas très efficace pour communiquer les modifications à la page principale, vous ne pouvez donc pas ouvrir le modal, le faire travailler, puis modifier la page.
Je n'ai aucune expérience personnelle avec CTools à ce sujet, donc je ne peux rien ajouter d'autre à cela, mais j'ai implémenté la méthode iframe dans quelques projets. Dans le plus récent, j'ai utilisé le plugin Colorbox pour afficher quelques formulaires créés avec le module Webform dans une fenêtre contextuelle. J'ajouterai un exemple de code ici au cas où il y aurait un intérêt.
Lien vers le formulaire:
<a class="colorbox_form" href="'.url('node/5').'">'.t('Send message').'</a>Code Javascript pour ouvrir l'adresse liée dans une popup:
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});
}
Dans le fichier de modèle de thème:
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();
}
}
J'ai attaché 'colorbox = true' aux liens en utilisant javascript afin que les utilisateurs avec javascript désactivé voient le formulaire avec le modèle normal. Le modèle iframe n'affiche que les messages, le titre et le contenu.
Cela fonctionne déjà, mais j'ai rencontré un problème avec les formulaires Web: «colorbox = true» n'était pas conservé lors de l'envoi du formulaire. Ma tentative de le réparer:
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');
}
}
Utilisez CTools qui peut insérer un formulaire dans un modal lorsqu'un utilisateur clique sur un lien.
Veuillez consulter le tutoriel suivant: Insérez un formulaire dans un modal contextuel avec CTools et Drupal 7, ce qui simplifie ce processus en quelques étapes.
Fondamentalement, vous devez définir votre hook_menu()rappel pour votre formulaire modal:
$items['mymodule/%ctools_js'] = array(
'page callback' => 'mymodule_callback',
'page arguments' => array(1),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
puis créez un générateur de liens qui retourne le code 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>';
}
afin qu'il puisse être utilisé dans le rappel de votre page, par exemple:
/**
* 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');
}
Lorsque l'utilisateur clique sur le lien, il fait une demande à /mymodule/ajaxou /mymodule/nojs(dans le cas de nojs), donc le rappel suivant gère la création d'un modal:
/**
* 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');
}
}
Il vous suffit maintenant de créer un formulaire et son gestionnaire d'envoi comme ci-dessous:
/**
* 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);
}
Pour tester cela, allez à: /mymodule/pageoù vous devriez voir le lien 'Magical Modal' qui devrait vous montrer la forme modale une fois cliqué.
Je commencerais à regarder la forme Modal , au lieu de Colorbox. Il existe spécifiquement parce que l'utilisation de Colorbox avec des formulaires fonctionne vraiment mal.
Sous forme modale, Ctools fait tout le travail en arrière-plan, qui prend en charge correctement la gestion des formulaires qui n'appartient tout simplement pas à Colorbox. Cela signifie également que si vous devez "modaliser" un formulaire non pris en charge, vous savez toujours que grâce à Ctools, il y a une API solide derrière laquelle vous pouvez basculer.
Points bonus pour le dépôt d'un patch avec un nouveau support de formulaire si vous l'écrivez. ;)
Je trouve que Simple Dialog est un excellent moyen de fournir des formulaires dans Modals. Il a l'avantage d'utiliser jQuery UI qui est en core.
Il vous suffit de fournir un lien vers le formulaire avec des informations supplémentaires. Il fournit une méthode simple basée sur les classes et les balises rel, ou une méthode de thème pour un contrôle plus précis. Je l'ai fait de deux manières:
Le module dont vous avez besoin est https://drupal.org/project/popup_forms , mais vous devez faire un peu de programmation pour l'appliquer (c'est-à-dire qu'il ne peut pas être simplement configuré via l'interface d'administration).