एक मोडल विंडो में फॉर्म दिखाएं [बंद]


23

मेरे पास एक फॉर्म है और मैं Drupal 7 का उपयोग कर रहा हूं। जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करता है, तो मुझे इस फॉर्म को पॉपअप में दिखाना होगा। तब उपयोगकर्ता को पॉप अप विंडो में फ़ॉर्म को पूरा करने में सक्षम होना चाहिए। मैं Colorbox या मोडल या किसी भी चीज़ का उपयोग कर सकता हूं । मैं सिर्फ यह जानना चाहता था कि ड्रुपल के लिए कौन सा विकल्प बेहतर है और मेरे पास क्या विकल्प हैं।

जवाबों:


11

वर्तमान में मुझे पता है कि 2 अच्छे विकल्प हैं: iframe (उदाहरण के लिए colorbox में) और CTools। कौन सा विकल्प उपयोग करना है यह परिस्थितियों पर निर्भर करता है। मुझे लगता है कि यह जानकारी मुझे मिली है कि CTools modal.html फ़ाइल में मुख्य अंतर है:

CTools एक साधारण मोडल प्रदान करता है जिसका उपयोग पॉपअप के रूप में जगह बनाने के लिए किया जा सकता है। यह सामान्य तौर-तरीकों से भिन्न है कि यह एक आइफ्रेम के माध्यम से अपना काम नहीं करता है। यह एक फायदा और नुकसान दोनों है। Iframe केवल उप-ब्राउज़र में सामान्य पृष्ठों को प्रस्तुत करता है और वे अपनी बात कर सकते हैं। यह एक मॉडल में मनमाने पृष्ठों और रूपों को रखना बहुत आसान बनाता है। हालाँकि, iframe वास्तव में मुख्य पृष्ठ पर परिवर्तनों को संप्रेषित करने में बहुत अच्छा नहीं है, इसलिए आप मोडल नहीं खोल सकते हैं, यह कुछ काम कर सकता है, और फिर पृष्ठ को संशोधित कर सकता है।

मुझे इस विषय पर CTools के साथ कोई व्यक्तिगत अनुभव नहीं है, इसलिए मैं इसके साथ कुछ और नहीं जोड़ सकता, लेकिन मैंने कुछ प्रोजेक्ट में iframe विधि लागू की है। सबसे हाल ही में मैंने एक पॉपअप में वेबफॉर्म मॉड्यूल के साथ बनाए गए कुछ रूपों को दिखाने के लिए Colorbox प्लगइन का उपयोग किया । यदि कुछ रुचि है तो मैं यहाँ कुछ उदाहरण कोड जोड़ूँगा।

फार्म का लिंक:

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

एक पॉपअप में लिंक किए गए पते को खोलने के लिए जावास्क्रिप्ट कोड:

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' संलग्न किया है ताकि जावास्क्रिप्ट बंद किए गए उपयोगकर्ता सामान्य टेम्पलेट के साथ फ़ॉर्म देखेंगे। Iframe टेम्पलेट में केवल संदेश, शीर्षक और सामग्री मुद्रित है।

यह पहले से ही काम करता है, लेकिन मैं वेबफॉर्म के साथ एक समस्या में भाग गया: फॉर्म जमा होने पर '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');
  }
}

8

उपयोगकर्ता द्वारा किसी लिंक पर क्लिक करने पर CTools का उपयोग करें जो एक मोडल में एक फॉर्म डाल सकता है।

कृपया निम्नलिखित ट्यूटोरियल देखें: 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यहां जाएं: जहां आपको 'जादुई मोडल' लिंक दिखाई दे, जिस पर क्लिक करते ही आपको मोडल फॉर्म दिखाई दे।


6

मैं Colorbox के बजाय मोडल फॉर्म को देखना शुरू करूंगा । यह विशेष रूप से मौजूद है क्योंकि रूपों के साथ Colorbox का उपयोग करना वास्तव में बुरा काम करता है।

मोडल रूप में, Ctools बैकग्राउंड में सभी काम करता है, जिसमें फॉर्म हैंडलिंग के लिए उचित समर्थन है जो कि Colorbox में नहीं है। इसका मतलब यह भी है कि अगर आपको एक असमर्थित रूप को "मोडल" करने की आवश्यकता है, तो आप हमेशा जानते हैं कि सीटीओल्स के लिए धन्यवाद इसके पीछे एक ठोस एपीआई है जिसे आप इसके बजाय स्विच कर सकते हैं।

यदि आप इसे लिखते हैं तो नए फॉर्म समर्थन के साथ पैच फाइल करने के लिए बोनस अंक। ;)


मैं मोडल फॉर्म की सिफारिश से असहमत हूं, या कम से कम एक क्वालीफायर जोड़ें - यह केवल लॉग इन, रिक्वेस्ट पासवर्ड, न्यू अकाउंट और डिफॉल्ट रूप से कॉन्टैक्ट फॉर्म के साथ काम करता है और ये हार्डकोड हैं। आप वर्तमान में इसका उपयोग मनमाने रूपों से नहीं कर सकते। इस बिंदु पर आपका सर्वश्रेष्ठ दांव, मॉडल के रूप में modal_forms का उपयोग करके ctools modal विंडो API का उपयोग करके एक कस्टम मॉड्यूल के माध्यम से मोडल फॉर्म को लागू करना हो सकता है।
ब्रायन वी

मैंने अपने जवाब को अधिक से अधिक वजन करने के लिए Ctools भाग की ओर अद्यतन किया है, हालांकि यदि मोडल फॉर्म अपने आप में समस्या को हल करता है, तो और भी बेहतर।
लेटेरियन

Seconded। Colorbox मॉड्यूल पृष्ठ अब इसके लिए भी Colorbox का उपयोग नहीं करने की सलाह देता है; इस सुविधा के लिए समर्थन को Colorbox की 2.x श्रृंखला से हटा दिया गया था।
पैट्रिक केनी

2

मुझे लगता है कि सरल संवाद मोडल्स में रूप प्रदान करने का एक शानदार तरीका है। इसमें jQuery UI का उपयोग करने का लाभ है जो कोर में है।

आपको बस कुछ अतिरिक्त जानकारी के साथ फॉर्म का लिंक प्रदान करना होगा। यह कक्षाओं के आधार पर एक सरल विधि प्रदान करता है और टैग, या अधिक ठीक-ट्यून नियंत्रण के लिए एक थीम विधि। मैंने इसे दो तरीकों से किया है:

  1. मेनू गुण आवश्यक rel और वर्ग टैग प्रदान करने के लिए मॉड्यूल।
  2. मेनू लिंक रेंडर कार्यों को ओवरराइड करने के लिए theme_menu_link

नमस्ते। क्या आप अपने उत्तर को थोड़ा बढ़ा सकते हैं? क्या आवश्यक हैं rel और वर्ग टैग? यदि लागू हो, तो उन्हें कहां स्थापित किया जा सकता है?
मोलॉट

@Queenvictoria, क्या आप सरल डायलॉग मॉड्यूल का उपयोग करके पॉपअप विंडो में फ़ॉर्म खोलने के लिए एक उदाहरण प्रदान कर सकते हैं?
ARUN

2

आपको जिस मॉड्यूल की आवश्यकता है , वह https://drupal.org/project/popup_forms है , लेकिन इसे लागू करने के लिए आपको कुछ प्रोग्रामिंग करने की आवश्यकता है (यानी इसे केवल व्यवस्थापक इंटरफ़ेस के माध्यम से कॉन्फ़िगर नहीं किया जा सकता है)।


लेकिन मॉड्यूल में एक स्थिर रिलीज नहीं है।
मथानकुमार

देव रिलीज ठीक काम करता है।
फेलिक्स ईव
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.