it-swarm.com.de

Formulare in einem modalen Fenster anzeigen

Ich habe ein Formular und verwende Drupal 7. Ich muss dieses Formular in einem Popup anzeigen, wenn ein Benutzer auf einen Link klickt. Der Benutzer sollte dann in der Lage sein, das Formular auszufüllen, während er sich im Pop befindet Ich kann alles wie Colorbox oder Modal oder irgendetwas verwenden. Ich wollte nur wissen, welche Option die bessere ist und welche Optionen ich für Drupal habe.

21
Hacker

Derzeit sind mir zwei gute Optionen bekannt: iframe (zum Beispiel in der Colorbox) und CTools. Welche Option verwendet werden soll, hängt von den Umständen ab. Ich denke, diese Informationen, die ich in der Datei CTools modal.html gefunden habe, machen den Hauptunterschied deutlich:

CTools bietet ein einfaches Modal, das als Popup zum Platzieren von Formularen verwendet werden kann. Es unterscheidet sich von den normalen modalen Frameworks dadurch, dass es seine Arbeit nicht über einen Iframe erledigt. Dies ist sowohl ein Vorteil als auch ein Nachteil. Der Iframe rendert einfach normale Seiten in einem Subbrowser und sie können ihr Ding machen. Das macht es viel einfacher, beliebige Seiten und Formulare modal zu platzieren. Der Iframe ist jedoch nicht sehr gut darin, Änderungen an der Hauptseite tatsächlich zu kommunizieren. Sie können das Modal also nicht öffnen, es arbeiten lassen und dann die Seite ändern.

Ich habe keine persönlichen Erfahrungen mit CTools zu diesem Thema, daher kann ich dem nichts hinzufügen, aber ich habe die iframe-Methode in einigen Projekten implementiert. In der letzten Version habe ich das Plugin Colorbox verwendet, um einige Formulare anzuzeigen, die mit dem Modul Webform in einem Popup erstellt wurden. Ich werde hier einen Beispielcode hinzufügen, falls Interesse besteht.

Link zum Formular:

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

Javascript-Code zum Öffnen der verknüpften Adresse in einem 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});
}

In der Theme-Vorlagendatei:

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

Ich habe 'colorbox = true' mit Javascript an die Links angehängt, damit Benutzer mit deaktiviertem Javascript das Formular mit der normalen Vorlage sehen. In der Iframe-Vorlage werden nur Nachrichten, Titel und Inhalt gedruckt.

Dies funktioniert bereits, aber ich bin auf ein Problem mit Webforms gestoßen: 'colorbox = true' wurde beim Senden des Formulars nicht beibehalten. Mein Versuch, das Problem zu beheben:

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

Verwenden Sie CTools , um ein Formular in ein Modal einzufügen, wenn ein Benutzer auf einen Link klickt.

Bitte überprüfen Sie das folgende Tutorial: Fügen Sie ein Formular mit CTools und Drupal 7 in ein Popup-Modal ein, was diesen Vorgang in wenigen Schritten vereinfacht.

Grundsätzlich müssen Sie Ihren hook_menu() Rückruf für Ihre modale Form definieren:

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

erstellen Sie dann einen Linkgenerator, der den HTML-Code zurückgibt:

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

so kann es in Ihrem Seitenrückruf verwendet werden, z.

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

Wenn der Benutzer auf den Link klickt, fordert er entweder /mymodule/ajax oder /mymodule/nojs (im Fall von nojs), daher behandelt der folgende Rückruf das Erstellen eines Modals:

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

Jetzt müssen Sie nur noch ein Formular und seinen Übermittlungshandler wie folgt erstellen:

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

Um dies zu testen, gehen Sie zu: /mymodule/page wo du den Link 'Magical Modal' sehen solltest, der dir das modale Formular zeigen soll, sobald du darauf geklickt hast.

8
kenorb

Ich würde anfangen, Modal form anstelle von Colorbox zu betrachten. Es existiert speziell, weil die Verwendung von Colorbox mit Formularen sehr schlecht funktioniert.

In modaler Form erledigt Ctools die gesamte Arbeit im Hintergrund, was eine ordnungsgemäße Unterstützung für die Formularverarbeitung bietet, die einfach nicht in Colorbox gehört. Das bedeutet auch, dass Sie immer wissen, dass dank Ctools eine solide API dahinter steht, zu der Sie stattdessen wechseln können, wenn Sie ein nicht unterstütztes Formular "modalisieren" müssen.

Bonuspunkte für das Einreichen eines Patches mit neuer Formularunterstützung, wenn Sie ihn schreiben. ;)

6
Letharion

Ich finde, dass Simple Dialog eine großartige Möglichkeit ist, Formulare in Modals bereitzustellen. Es hat den Vorteil, dass die jQuery-Benutzeroberfläche im Kern verwendet wird.

Sie müssen lediglich einen Link zum Formular mit einigen zusätzlichen Informationen bereitstellen. Es bietet eine einfache Methode, die auf Klassen und rel-Tags basiert, oder eine Themenmethode für eine genauere Steuerung. Ich habe das auf zwei Arten gemacht:

  1. Das Modul Menüattribute , um die erforderlichen rel- und class-Tags bereitzustellen.
  2. theme_menu_link zum Überschreiben von Renderfunktionen für Menü-Links.
2
Queenvictoria

Das Modul, das Sie benötigen, ist https://drupal.org/project/popup_forms , aber Sie müssen einige Programmierungen vornehmen, um es anzuwenden (d. H. Es kann nicht einfach über die Administrationsoberfläche konfiguriert werden).

2
Code Your Dream