回答:
現在私が知っている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');
}
}
使用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」リンクが表示されます。
私はモーダルフォームを見始めますColorboxの代わりに始めます。Colorboxをフォームで使用すると非常にうまく機能しないため、特に存在します。
モーダルフォームでは、Ctoolsはすべての作業をバックグラウンドで行います。これは、Colorboxに属さないフォーム処理を適切にサポートします。また、サポートされていないフォームを「モーダル」にする必要がある場合は、Ctoolsのおかげで、代わりに切り替えることができる強力なAPIが背後にあることを常に知っています。
パッチを作成する場合、新しいフォームサポートを使用してパッチを提出することのボーナスポイント ;)
私はそのシンプルなダイアログを見つけますモーダルでフォームを提供するための素晴らしい方法です。コアにあるjQuery UIを使用する利点があります。
あなたがする必要があるのは、いくつかの追加情報を含むフォームへのリンクを提供することです。クラスとrelタグに基づく単純なメソッド、またはより細かく制御するためのテーマメソッドを提供します。これは2つの方法で行いました。
必要なモジュールはhttps://drupal.org/project/popup_formsですが、それを適用するためにプログラミングを行う必要があります(つまり、管理インターフェースで設定することはできません)。