Mostra i moduli in una finestra modale [chiuso]

Ho un modulo e sto usando Drupal 7. Devo mostrare questo modulo in un popup quando un utente fa clic su un collegamento. L'utente dovrebbe quindi essere in grado di compilare il modulo nella finestra a comparsa. Posso usare qualsiasi cosa come Colorbox o modali o altro. Volevo solo sapere qual è l'opzione migliore e quali opzioni ho per Drupal.

Ci sono 2 buone opzioni che conosco attualmente: iframe (ad esempio in colorbox) e CTools. Quale opzione usare dipende dalle circostanze. Immagino che queste informazioni che ho trovato nel file modal.html di CTools evidenzino la differenza principale:

CTools fornisce un semplice modale che può essere utilizzato come popup per posizionare i moduli. Si differenzia dai normali framework modali in quanto non svolge il proprio lavoro tramite un iframe. Questo è sia un vantaggio che uno svantaggio. L'iframe esegue semplicemente il rendering delle pagine normali in un browser secondario e possono fare le loro cose. Ciò rende molto più semplice inserire pagine e moduli arbitrari in modalità modale. Tuttavia, l'iframe non è molto bravo a comunicare effettivamente le modifiche alla pagina principale, quindi non è possibile aprire il modale, fare in modo che funzioni e quindi modificare la pagina.

Non ho esperienza personale con CTools su questo argomento, quindi non posso aggiungere nient'altro a questo, ma ho implementato il metodo iframe in un paio di progetti. Nel più recente ho usato il plug-in Colorbox per mostrare alcuni moduli creati con il modulo Webform in un popup. Aggiungerò un codice di esempio qui nel caso ci fosse un certo interesse.

Link al modulo:

<a class="colorbox_form" href="'.url('node/5').'">'.t('Send message').'</a>

Codice Javascript per aprire l'indirizzo collegato in un 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});
}

Nel file modello tema:

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();
  }
}

Ho allegato 'colorbox = true' ai collegamenti usando javascript in modo che gli utenti con javascript disattivato vedessero il modulo con il modello normale. Il modello iframe ha solo messaggi, titolo e contenuto stampati.

Funziona già, ma ho riscontrato un problema con Webforms: 'colorbox = true' non è stato conservato quando il modulo è stato inviato. Il mio tentativo di risolverlo:

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

Utilizzare CTools che possono inserire un modulo in un modale quando un utente fa clic su un collegamento.

Controlla il seguente tutorial: Inserisci un modulo in un modale pop-up con CTools e Drupal 7 che semplifica questo processo in pochi passaggi.

Fondamentalmente è necessario definire il hook_menu()callback per il modulo modale:

$items['mymodule/%ctools_js'] = array(
  'page callback' => 'mymodule_callback',
  'page arguments' => array(1),
  'access callback' => TRUE,
  'type' => MENU_CALLBACK,
);

quindi crea un generatore di link che restituisca il codice 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>';
}

quindi può essere utilizzato nel callback della tua pagina, ad esempio:

/**
 * 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');
}

Quando l'utente fa clic sul collegamento, invia una richiesta /mymodule/ajaxo /mymodule/nojs(in caso dinojs ), quindi il callback seguente gestisce la creazione di un modale:

/**
 * 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');
  }
} 

Ora devi solo creare un modulo e il relativo gestore di invio come di seguito:

/**
 * 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);
}

Per provarlo, vai a: /mymodule/page dove dovresti vedere il link 'Magical Modal' che dovrebbe mostrarti il ​​modulo modale una volta cliccato.

Vorrei iniziare a guardare modulo modale , anziché Colorbox. Esiste specificamente perché l'utilizzo di Colorbox con i moduli funziona davvero male.

In forma modale, Ctools fa tutto il lavoro in background, che ha un supporto adeguato per la gestione dei moduli che non appartiene a Colorbox. Ciò significa anche che se devi "modalizzare" un modulo non supportato, sai sempre che grazie a Ctools c'è un'API solida dietro cui puoi invece passare.

Punti bonus per la presentazione di una patch con il supporto del nuovo modulo se la scrivi. ;)

Trovo quel dialogo semplice sia un ottimo modo per fornire moduli in modali. Ha il vantaggio di usare l'interfaccia utente di jQuery che è nel core.

Tutto quello che devi fare è fornire un link al modulo con alcune informazioni aggiuntive. Fornisce un metodo semplice basato su classi e tag rel o un metodo a tema per un controllo più preciso. L'ho fatto in due modi:

1. Gli attributi del menu modulo per fornire i tag rel e class richiesti.
2. theme_menu_link per sovrascrivere le funzioni di rendering dei collegamenti di menu.

Il modulo di cui hai bisogno è https://drupal.org/project/popup_forms , ma devi fare un po 'di programmazione per applicarlo (cioè non può essere semplicemente configurato tramite l'interfaccia di amministrazione).