在模式窗口中显示表单[关闭]

23

我有一个表单，正在使用Drupal7。当用户单击链接时，需要在弹出窗口中显示此表单。然后，用户应该能够在弹出窗口中填写表格。我可以使用任何诸如Colorbox或modals之类的东西。我只是想知道哪个是更好的选择，我对Drupal有哪些选择。

7  forms 
— 黑客
source

Answers:

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将'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');
  }
}
— 马迪斯
source
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”链接，该链接应在单击后向您显示模态形式。

— Kenorb
source
6

我将开始查看Modal form，而不是Colorbox。它特别存在是因为将Colorbox与表单一起使用确实很糟糕。

在模式形式下，Ctools在后台完成所有工作，它对表单处理提供了适当的支持，而这种处理不属于Colorbox。这也意味着，如果您需要“模式化”不受支持的表单，那么您始终知道，由于使用了Ctools，它背后有一个可靠的API，您可以改为使用它。

如果编写了带有新表格支持的补丁，则可以得到加分。;）

— 莱瑟里奥
source
我不同意模态表单的建议，或者至少添加了一个限定词-默认情况下，它仅适用于“登录”，“请求密码”，“创建新帐户”和“联系人”表单，并且这些表单是硬编码的。您目前无法以任意形式使用它。此时，您最好的选择是使用modal_forms作为模型，通过使用ctools模态窗口API的自定义模块来实现模态表单。
— BrianV 2012年
我已经更新了答案，以更加重视Ctools部分，尽管Modal Form本身可以解决问题，甚至更好。
— Letharion 2012年
第二。现在，“ Colorbox”模块页面建议不要同时使用“ Colorbox”。从2.x系列的Colorbox中删除了对此功能的支持。
— 帕特里克·肯尼
2

我发现“ 简单对话框”是在Modals中提供表单的好方法。它具有使用核心jQuery UI的优势。

您所需要做的就是提供带有一些其他信息的表单链接。它提供了一个基于类和rel标记的简单方法，或者是一个主题方法，用于更精细的控制。我已经通过两种方式做到这一点：

  1. 该菜单属性模块，以提供所需要的相对和类标签。
  2. theme_menu_link覆盖菜单链接渲染功能。
— 女王维多利亚
source
你好。您能否扩大答案？所需的rel和class标签是什么？如果适用，可以在哪里设置它们？
— Mołot
@Queenvictoria，能否请您提供一个示例，说明如何使用“简单对话框”模块在弹出窗口中打开表单？
— 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.