web-dev-qa-db-ja.com

ダイアログモーダルjqueryでフォームを表示する方法

よろしく、

リンクをクリックしたときにモーダルダイアログ内にフォームを表示する必要があります。ユーザーがデータを入れたり、データを保存したりできます。

私は自分のフォームが入ったテンプレートを作成することを考えましたが、メソッドを使用してそれらを表示することはしませんでした。ダイアログ（）でモーダルを表示します。

メソッドでダイアログテンプレートを表示する方法を誰かが知っていますか？それとも誰かがそれを行う方法について他のアイデアを持っていますか？

ありがとう。

6themingforms
3
Eduardo

私が現在知っている2つの優れたオプションがあります。iframe（カラーボックスなど）と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を使用してリンクに 'colorbox = true'を添付し、JavaScriptがオフになっているユーザーに通常のテンプレートのフォームが表示されるようにしました。 iframeテンプレートには、メッセージ、タイトル、コンテンツのみが印刷されます。

これはすでに機能していますが、Webフォームで問題が発生しました：フォームが送信されたときに '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');
  }
}
1
Yusef

OK！これはHOOK_BLOCKで行いました。コンテンツは私のテンプレートです。次に、Jquery UIのメソッド.dialogでこのブロックを呼び出すだけです。

私のコード：

function mymodule_init() {
    drupal_add_js(drupal_get_path('module', 'mymodule') . '/mymodule.js');
    drupal_add_css(drupal_get_path('module', 'mymodule') . '/mymodule.css');
}

function mymodule_block($op = 'list', $delta = 0, $edit = array()) {
    switch ($op) {
        case 'list':
            return array(
                0 => array(
                    'info' => t('PopUp'),
                ),
            );
            break;
        case 'view':
            $subject = '';
            $content = '';
            switch ($delta) {
                case 0:
                    $content = theme('mymodule_styling');
                    $subject = t('Show the popup.');
                    break;
            }
            if ($subject || $content) {
                return array(
                    'subject' => $subject,
                    'content' => $content,
                );
            }
            break;
    }
}

function mymodule_theme() {
    $path = drupal_get_path('module', 'mymodule') . '/templates';
    return array(
        'mymodule_styling' => array(
            'template' => 'popup_template',
            'arguments' => array('message' => NULL),
            'path' => $path
        ),
    );
}

次に、ブロックをアクティブにし、CSSでこのブロックのみを非表示にします。

div#block-popup-0{
    display: none;
}

そして私のJSショーでポップアップのように：

function show_popup_now(){ // This method have my link on event onclick
    $("div#block-popup-0").css("display", "inline-block");
    $("div#block-popup-0").dialog({
        autoOpen: true, 
        modal:true, 
        width: 594, 
        height: 350, 
        closeText: "Cerrar"
    });
}

しかし、これに問題があるのは、ポップアップを表示するためのリンクで（初めて）クリックしたとき、WORK！です。しかし、閉じて（もう一度）リンクをクリックすると、ポップアップは表示されません。

コードにエラーがありますか？全てに感謝！ ：D

1
Eduardo