web-dev-qa-db-fra.com

Afficher les formulaires dans une fenêtre modale

J'ai un formulaire et j'utilise Drupal 7. J'ai besoin d'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 lorsqu'il est dans la fenêtre pop fenêtre. Je peux utiliser n'importe quoi comme Colorbox ou des modaux ou quoi que ce soit. Je voulais juste savoir quelle est la meilleure option et quelles options ai-je pour Drupal.

7forms
21
Hacker

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 cette information que j'ai trouvée dans le fichier CTools modal.html fait 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 affiche 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 réellement 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'a que des messages, un titre et un contenu imprimés.

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');
  }
}
10
Madis

Utilisez CTools qui peut insérer un formulaire dans un modal lorsqu'un utilisateur clique sur un lien.

Veuillez vérifier 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 callback hook_menu() pour votre forme modale:

$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 demande soit à /mymodule/ajax ou /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 ne vous reste plus qu'à 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, accédez à: /mymodule/page où vous devriez voir le lien "Magical Modal" qui devrait vous montrer la forme modale une fois cliqué.

8
kenorb

Je commencerais à regarder forme modale , 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 avez besoin de "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. ;)

6
Letharion

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 men pour fournir les balises rel et class requises.
  2. theme_menu_link pour remplacer les fonctions de rendu des liens de menu.
2
Queenvictoria

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

2
Code Your Dream