Pokaż formularze w oknie modalnym [zamknięte]

Mam formularz i korzystam z Drupal 7. Muszę wyświetlić ten formularz w wyskakującym okienku, gdy użytkownik kliknie link. Użytkownik powinien wtedy móc wypełnić formularz w wyskakującym oknie. Mogę używać czegoś takiego jak Colorbox, modały lub cokolwiek innego. Chciałem tylko wiedzieć, która opcja jest lepsza i jakie mam opcje dla Drupala.

Obecnie znam 2 dobre opcje: iframe (na przykład w polu koloru) i CTools. Wybór opcji zależy od okoliczności. Myślę, że te informacje, które znalazłem w pliku modal.html CTools, uwypuklają główną różnicę:

CTools zapewnia prosty modal, którego można użyć jako wyskakującego okienka do umieszczania formularzy. Różni się od zwykłych ram modalnych tym, że nie wykonuje swojej pracy za pośrednictwem elementu iframe. Jest to zarówno zaletą, jak i wadą. Ramka iframe renderuje zwykłe strony w pod-przeglądarce i może to zrobić. To znacznie ułatwia umieszczanie dowolnych stron i formularzy w formie modalnej. Jednak iframe nie jest zbyt dobry w komunikowaniu zmian na stronie głównej, więc nie możesz otworzyć modalu, pozwolić mu trochę popracować, a następnie zmodyfikować stronę.

Nie mam osobistego doświadczenia z CTools na ten temat, więc nie mogę dodać do tego nic innego, ale zaimplementowałem metodę iframe w kilku projektach. W najnowszym użyłem wtyczki Colorbox, aby wyświetlić kilka formularzy utworzonych za pomocą modułu Webform w wyskakującym okienku. Dodam tutaj przykładowy kod na wypadek zainteresowania.

Link do formularza:

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

Kod JavaScript, aby otworzyć link w wyskakującym okienku:

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

W pliku szablonu motywu:

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

Podłączyłem „colorbox = true” do linków za pomocą javascript, aby użytkownicy z wyłączonym javascript mogli zobaczyć formularz z normalnym szablonem. Szablon iframe zawiera tylko wiadomości, tytuł i treść.

To już działa, ale napotkałem problem z formularzami internetowymi: „colorbox = true” nie został zachowany po przesłaniu formularza. Moja próba naprawy:

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

Użyj CTools, które mogą wstawić formularz do modalu, gdy użytkownik kliknie link.

Sprawdź następujący samouczek: Wstaw formularz do wyskakującego modalu za pomocą CTools i Drupal 7, co upraszcza ten proces w kilku krokach.

Zasadniczo musisz zdefiniować swoje hook_menu()wywołanie zwrotne dla formy modalnej:

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

następnie utwórz generator linków, który zwraca kod 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>';
}

więc można go użyć w wywołaniu zwrotnym strony, np .:

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

Gdy użytkownik kliknie łącze, wysyła żądanie do /mymodule/ajaxlub /mymodule/nojs(w przypadku nojs), więc następujące wywołanie zwrotne obsługuje tworzenie modalu:

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

Teraz wystarczy utworzyć formularz i jego moduł obsługi przesyłania, jak poniżej:

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

Aby to przetestować, przejdź do: /mymodule/pagegdzie powinieneś zobaczyć link „Magical Modal”, który powinien pokazać formę modalną po kliknięciu.

Zaczynam patrzeć na formularz Modal zamiast na Colorbox. W szczególności istnieje, ponieważ korzystanie z Colorbox z formularzami działa naprawdę źle.

W formie modalnej Ctools wykonuje całą pracę w tle, która ma odpowiednie wsparcie dla obsługi formularzy, które po prostu nie należą do Colorbox. Oznacza to również, że jeśli potrzebujesz „modalnie” nieobsługiwanej formy, zawsze wiesz, że dzięki Ctools kryje się za nią solidny interfejs API, na który możesz się przełączyć.

Punkty bonusowe za złożenie łatki z obsługą nowego formularza, jeśli ją napiszesz. ;)

Uważam, że Simple Dialog to świetny sposób na dostarczanie formularzy w Modals. Ma tę zaletę, że korzysta z interfejsu użytkownika jQuery, który jest rdzeniem.

Wystarczy, że podasz link do formularza z dodatkowymi informacjami. Zapewnia prostą metodę opartą na klasach i znacznikach rel lub metodę motywu dla bardziej precyzyjnej kontroli. Zrobiłem to na dwa sposoby:

1. Te atrybuty menu moduł do dostarczenia wymaganych rel i klasa tagi.
2. theme_menu_link, aby zastąpić funkcje renderowania linków menu.

Potrzebny moduł to https://drupal.org/project/popup_forms , ale musisz go zaprogramować, aby go zastosować (tzn. Nie można go skonfigurować tylko za pomocą interfejsu administratora).