แสดงแบบฟอร์มในหน้าต่างโมดัล [ปิด]

ฉันมีฟอร์มและฉันใช้ Drupal 7 ฉันต้องแสดงฟอร์มนี้ในป๊อปอัปเมื่อผู้ใช้คลิกที่ลิงก์ ผู้ใช้ควรจะสามารถกรอกแบบฟอร์มในขณะที่อยู่ในหน้าต่างป๊อปอัป ฉันสามารถใช้อะไรก็ได้เช่นColorboxหรือ modals หรืออะไรก็ได้ ฉันแค่อยากรู้ว่าตัวเลือกใดดีกว่าและฉันมีตัวเลือกใดบ้างสำหรับ Drupal

ปัจจุบันมี 2 ตัวเลือกที่ดีที่ฉันรู้จัก: iframe (ใน colorbox เป็นต้น) และ CTools ตัวเลือกใดที่จะใช้ขึ้นอยู่กับสถานการณ์ ฉันเดาว่าข้อมูลนี้ฉันพบในไฟล์ modools.html CTools นำความแตกต่างที่สำคัญ:

CTools จัดเตรียมโมดอลง่ายๆที่สามารถใช้เป็นป๊อปอัพเพื่อวางฟอร์ม มันแตกต่างจากกรอบคำสั่งปกติที่ไม่ทำงานผ่าน iframe นี่เป็นทั้งข้อดีและข้อเสีย iframe เพียงแสดงหน้าปกติในเบราว์เซอร์ย่อยและพวกเขาสามารถทำสิ่งของพวกเขา ทำให้ง่ายต่อการใส่หน้าและรูปแบบโดยพลการในรูปแบบ อย่างไรก็ตาม iframe นั้นไม่ค่อยดีนักในการสื่อสารการเปลี่ยนแปลงไปยังหน้าหลักดังนั้นคุณจึงไม่สามารถเปิดคำกริยาได้ให้ทำงานและจากนั้นปรับเปลี่ยนหน้า

ฉันไม่มีประสบการณ์ส่วนตัวเกี่ยวกับ CTools ในเรื่องนี้ดังนั้นฉันจึงไม่สามารถเพิ่มสิ่งอื่นเข้าไปอีกได้ แต่ฉันได้ใช้วิธี iframe ในสองโครงการ ในล่าสุดฉันใช้ปลั๊กอินColorboxเพื่อแสดงรูปแบบที่สร้างด้วยWebformโมดูลในป๊อปอัพ ฉันจะเพิ่มโค้ดตัวอย่างที่นี่ในกรณีที่มีความสนใจ

เชื่อมโยงไปยังแบบฟอร์ม:

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

รหัส Javascript เพื่อเปิดที่อยู่ที่เชื่อมโยงในป๊อปอัพ:

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

ในไฟล์เท็มเพลตธีม:

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

ฉันแนบ 'colorbox = true' ไปยังลิงก์โดยใช้ javascript เพื่อให้ผู้ใช้ที่ปิดจาวาสคริปต์จะเห็นรูปแบบด้วยเทมเพลตปกติ เทมเพลต iframe มีเพียงข้อความชื่อเรื่องและเนื้อหาที่พิมพ์

สิ่งนี้ใช้งานได้ แต่ฉันพบปัญหากับ Webforms: 'colorbox = true' ไม่ได้รับการเก็บรักษาไว้เมื่อส่งแบบฟอร์ม ความพยายามของฉันในการแก้ไข:

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

ใช้CToolsซึ่งสามารถแทรกฟอร์มลงใน modal เมื่อผู้ใช้คลิกที่ลิงค์

โปรดตรวจสอบบทช่วยสอนต่อไปนี้: แทรกฟอร์มลงใน modal แบบป๊อปอัพด้วย CTools และ Drupal 7ซึ่งช่วยให้กระบวนการนี้ง่ายขึ้นในไม่กี่ขั้นตอน

โดยทั่วไปคุณจำเป็นต้องกำหนดhook_menu()โทรกลับของคุณสำหรับรูปแบบคำกริยาของคุณ:

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

จากนั้นสร้างตัวสร้างลิงก์ซึ่งส่งคืนโค้ด 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>';
}

ดังนั้นจึงสามารถใช้ในการเรียกกลับหน้าเว็บของคุณเช่น:

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

เมื่อผู้ใช้คลิกที่ลิงค์มันจะทำการร้องขอไปยัง/mymodule/ajaxหรือ/mymodule/nojs(ในกรณีnojs) ดังนั้นการติดต่อกลับดังต่อไปนี้จะจัดการกับการสร้างคำกริยา:

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

ตอนนี้คุณเพียงแค่ต้องสร้างแบบฟอร์มและส่งตัวจัดการดังต่อไปนี้:

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

ในการทดสอบให้ไปที่: /mymodule/pageที่ซึ่งคุณควรเห็นลิงก์ 'Magical Modal' ซึ่งจะแสดงรูปแบบคำกริยาเมื่อคลิก

ฉันจะเริ่มดูรูปแบบ Modalแทน Colorbox มันมีอยู่โดยเฉพาะเพราะการใช้ Colorbox กับแบบฟอร์มทำงานไม่ดีจริงๆ

ในรูปแบบโมดัล Ctoolsทำงานในพื้นหลังทั้งหมดซึ่งมีการสนับสนุนที่เหมาะสมสำหรับการจัดการแบบฟอร์มที่ไม่ได้อยู่ใน Colorbox นั่นหมายความว่าถ้าคุณต้องการ "โมดัล" ฟอร์มที่ไม่ได้รับการสนับสนุนคุณจะรู้เสมอว่าต้องขอบคุณ Ctools ที่มี API ที่เป็นของแข็งอยู่ด้านหลังซึ่งคุณสามารถเปลี่ยนไปใช้แทนได้

คะแนนโบนัสสำหรับการยื่นแพทช์ด้วยการสนับสนุนรูปแบบใหม่ถ้าคุณเขียน ;)

ฉันพบว่าSimple Dialogเป็นวิธีที่ยอดเยี่ยมในการจัดเตรียมแบบฟอร์มใน Modals มันมีข้อได้เปรียบของการใช้ jQuery UI ซึ่งเป็นแกนหลัก

สิ่งที่คุณต้องทำคือให้ลิงค์ไปยังแบบฟอร์มพร้อมข้อมูลเพิ่มเติม มันมีวิธีการที่ง่ายขึ้นอยู่กับคลาสและแท็ก rel หรือวิธีการชุดรูปแบบสำหรับการควบคุมที่ดี ฉันได้ทำสองวิธี:

1. เมนูคุณสมบัติโมดูลเพื่อให้ที่จำเป็น rel และชั้นแท็ก
2. theme_menu_linkเพื่อแทนที่ฟังก์ชันสร้างการแสดงผลลิงก์เมนู

โมดูลที่คุณต้องการคือhttps://drupal.org/project/popup_formsแต่คุณต้องทำการเขียนโปรแกรมบางอย่างเพื่อใช้งาน (เช่นไม่สามารถกำหนดค่าผ่านอินเทอร์เฟซผู้ดูแลระบบ)