Afficher les formulaires dans une fenêtre modale [fermé]

23

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.

Pirate
la source

Réponses:

11

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');
  }
}
Madis
la source
8

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é.

kenorb
la source
6

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. ;)

Létharion
la source
Je ne suis pas d'accord avec la recommandation du formulaire modal, ou au moins ajouter un qualificatif - cela ne fonctionne qu'avec les formulaires de connexion, de demande de mot de passe, de création de compte et de contact par défaut, et ceux-ci sont codés en dur. Vous ne pouvez pas actuellement l'utiliser avec des formulaires arbitraires. Votre meilleur pari, à ce stade, peut être d'implémenter des formulaires modaux via un module personnalisé en utilisant l'API de fenêtre modale ctools, en utilisant modal_forms comme modèle.
BrianV
J'ai mis à jour ma réponse pour peser plus lourdement sur la partie Ctools, bien que si Modal Form en soi résout le problème, encore mieux.
Letharion
Appuyé. La page du module Colorbox recommande désormais de ne pas utiliser Colorbox pour cela également; la prise en charge de cette fonctionnalité a été supprimée de la série 2.x de Colorbox.
Patrick Kenny
2

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:

  1. Le module Attributs de menu pour fournir les balises rel et class requises.
  2. theme_menu_link pour remplacer les fonctions de rendu des liens du menu.
La reine victoria
la source
Bonjour. Pourriez-vous développer un peu votre réponse? Quelles sont les balises rel et class requises? Où peuvent-ils être installés, le cas échéant?
Mołot
@Queenvictoria, pourriez-vous s'il vous plaît fournir un exemple sur la façon d'ouvrir un formulaire dans une fenêtre popup en utilisant le module Simple Dialog?
ARUN
2

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).

Codez votre rêve
la source
Mais le module n'a pas de version stable.
Mathankumar
La version de développement fonctionne très bien.
Felix Eve