モーダルウィンドウでフォームを表示[閉じる]


23

フォームがあり、Drupal 7を使用しています。ユーザーがリンクをクリックすると、このフォームをポップアップで表示する必要があります。ユーザーは、ポップアップウィンドウでフォームに入力できる必要があります。Colorboxやモーダルなど、何でも使用できます。どちらがより良いオプションで、どのオプションがDrupalにあるのか知りたいだけです。

回答:


11

現在私が知っている2つの良いオプションがあります:iframe(例えばcolorbox)とCTools。使用するオプションは状況によって異なります。CTools modal.htmlファイルで見つけた次の情報が主な違いをもたらしていると思います。

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

javascriptをオフにしたユーザーが通常のテンプレートのフォームを表示できるように、javascriptを使用してリンクに「colorbox = true」を添付しました。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');
  }
}

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場所に移動します。クリックすると、モーダルフォームが表示される「Magical Modal」リンクが表示されます。


6

私はモーダルフォームを見始めますColorboxの代わりに始めます。Colorboxをフォームで使用すると非常にうまく機能しないため、特に存在します。

モーダルフォームでは、Ctoolsはすべての作業をバックグラウンドで行います。これは、Colorboxに属さないフォーム処理を適切にサポートします。また、サポートされていないフォームを「モーダル」にする必要がある場合は、Ctoolsのおかげで、代わりに切り替えることができる強力なAPIが背後にあることを常に知っています。

パッチを作成する場合、新しいフォームサポートを使用してパッチを提出することのボーナスポイント ;)


モーダルフォームの推奨事項に同意しないか、少なくとも修飾子を追加します。これは、ログイン、パスワードの要求、新しいアカウントの作成、連絡先フォームでのみ機能し、これらはハードコードされています。現在、任意のフォームで使用することはできません。この時点での最善の策は、ctoolsモーダルウィンドウAPIを使用してmodal_formsをモデルとして使用し、カスタムモジュールを介してモーダルフォームを実装することです。
ブライアンV

Modal Form自体で問題を解決できればさらに良いのですが、Ctoolsの部分に重点を置くように回答を更新しました。
レサリオン

出向。Colorboxモジュールページでは、これにもColorboxを使用しないことを推奨しています。この機能のサポートは、Colorboxの2.xシリーズから削除されました。
パトリックケニー

2

私はそのシンプルなダイアログを見つけますモーダルでフォームを提供するための素晴らしい方法です。コアにあるjQuery UIを使用する利点があります。

あなたがする必要があるのは、いくつかの追加情報を含むフォームへのリンクを提供することです。クラスとrelタグに基づく単純なメソッド、またはより細かく制御するためのテーマメソッドを提供します。これは2つの方法で行いました。

  1. メニューの属性に必要なRELとクラスタグを提供するために、モジュールを。
  2. theme_menu_linkは、メニューリンクレンダリング関数をオーバーライドします。

こんにちは。答えを少し広げていただけますか?必要なrelおよびclassタグは何ですか?該当する場合、どこで設定できますか?
モウォ

@Queenvictoria、シンプルダイアログモジュールを使用してポップアップウィンドウでフォームを開く方法の例を教えてください。
ARUN

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.