Kalıcı bir pencerede formları göster [kapalı]

Bir formum var ve Drupal 7 kullanıyorum. Bir kullanıcı bir bağlantıyı tıkladığında bu formu açılan pencerede göstermem gerekiyor. Kullanıcı daha sonra açılan penceredeyken formu doldurabilmelidir. Colorbox veya modals gibi bir şey kullanabilirim . Sadece hangisinin daha iyi seçenek olduğunu ve Drupal için hangi seçeneklere sahip olduğumu bilmek istedim.

Şu an bildiğim 2 iyi seçenek var: iframe (örneğin colorbox'ta) ve CTools. Hangi seçeneği kullanacağınız şartlara bağlıdır. Sanırım CTools modal.html dosyasında bulduğum bu bilginin asıl farkı ortaya çıkardığı:

CTools, form yerleştirmek için açılır pencere olarak kullanılabilecek basit bir yöntem sağlar. Normal modal çerçevelerden farklıdır, çünkü çalışmasını iframe üzerinden yapmaz. Bu hem avantaj hem de dezavantajdır. İframe bir alt tarayıcıda normal sayfalar oluşturur ve kendi işini yapabilir. Bu, isteğe bağlı sayfaları ve formları modele yerleştirmeyi çok daha kolaylaştırır. Ancak, iframe, ana sayfadaki değişiklikleri iletmek konusunda gerçekten iyi değil, bu nedenle modal modunu açamazsınız, biraz çalışmasını isteyin ve ardından sayfayı değiştirin.

Bu konuda CTools ile hiçbir kişisel deneyimim yok, bu yüzden başka bir şey ekleyemiyorum, ancak birkaç projede iframe yöntemini kullandım. En sonuncusunda , bir açılır pencerede Webform modülüyle oluşturulan birkaç formu göstermek için Colorbox eklentisini kullandım . İlgilenme ihtimaline karşı örnek kod ekleyeceğim.

Forma bağlantı:

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

Bağlantılı adresi bir açılır pencerede açmak için Javascript kodu:

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

Tema şablonu dosyasında:

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

Ben javascript kullanan bağlantılara 'colorbox = true' ekledim, böylece javascript kapalı olan kullanıcılar normal şablonlu formu görebilirler. İframe şablonunda yalnızca mesajlar, başlık ve basılı içerik var.

Bu zaten çalışıyor, ancak Webforms ile ilgili bir sorunla karşılaştım: 'colorbox = true' form gönderildiğinde korunmadı. Düzeltme girişimim:

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

Kullanım CTools Bir kullanıcı bir bağlantıyı tıkladığında modal içine bir form ekleyebilirsiniz.

Lütfen aşağıdaki öğreticiyi kontrol edin: Bu işlemi birkaç adımda basitleştiren CTools ve Drupal 7 içeren bir açılır mod içine bir form ekleyin .

Temel olarak hook_menu()modal formunuz için geri çağrınızı tanımlamanız gerekir :

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

sonra HTML kodunu döndüren bir link oluşturucu oluşturun:

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

bu nedenle, sayfa geri aramanızda kullanılabilir, örneğin:

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

Kullanıcı bağlantıya tıkladığında, ya /mymodule/ajaxda /mymodule/nojs(durumunda nojs) isteğinde bulunur , bu nedenle aşağıdaki geri arama bir modal oluşturmayı ele alır:

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

Şimdi bir form ve gönderim işleyicisini aşağıda belirtmeniz yeterlidir:

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

Bunu test etmek için: /mymodule/page'e bir kez tıklandığında modal formu göstermesi gereken' Magical Modal 'bağlantısını görmeniz gereken yere gidin .

Colorbox yerine Modal formuna bakmaya başlardım. Bu özellikle var çünkü Colorbox'ı formlarla kullanmak gerçekten kötü çalışıyor.

Modal formda, Ctools , Colorbox'a ait olmayan form işleme için uygun desteği olan tüm işleri arka planda yapar. Bu ayrıca, desteklenmeyen bir formu "kalıba sokmanız" gerekirse, her zaman Ctools sayesinde bunun yerine geçebileceğiniz sağlam bir API olduğunu biliyorsunuz demektir.

Bir yamayı yeni form desteği ile doldurmanız için bonus puanları yazarsanız. ;)

Basit Diyalogun , Modallarda formlar sağlamanın harika bir yolu olduğunu biliyorum . Çekirdekli olan jQuery UI kullanma avantajına sahiptir.

Yapmanız gereken tek şey, ek bilgiler içeren forma bir bağlantı sağlamak. Sınıflara ve rel etiketlerine dayalı basit bir yöntem veya daha hassas ayar kontrolü için bir tema yöntemi sağlar. Bunu iki şekilde yaptım:

1. Menü Nitelikler gerekli olan rel ve sınıf etiketleri sağlamak için modülü.
2. menu_menu_link , menü bağlantısı oluşturma işlevlerini geçersiz kılmak için kullanılır.

İhtiyacınız olan modül https://drupal.org/project/popup_forms'dır , ancak uygulamak için bazı programlama yapmanız gerekir (yani sadece yönetici arayüzü ile yapılandırılamaz).