Показать формы в модальном окне [закрыто]

У меня есть форма, и я использую Drupal 7. Мне нужно показать эту форму во всплывающем окне, когда пользователь нажимает на ссылку. Затем пользователь должен заполнить форму во всплывающем окне. Я могу использовать что-то вроде Colorbox или модалов или что-то еще. Я просто хотел узнать, какой вариант лучше и какие у меня есть для Drupal.

23 голоса | спросил Hacker 4 Jpm1000000pmWed, 04 Jan 2012 13:25:05 +040012 2012, 13:25:05

5 ответов


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

Я привязал «colorbox = true» к ссылкам с помощью javascript, чтобы пользователи с отключенным 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');
  }
}
ответил Dooshta 5 Jam1000000amThu, 05 Jan 2012 02:35:41 +040012 2012, 02:35:41
6

Я бы посмотрел Модальную форму вместо Colorbox. Это особенно существует, потому что использование Colorbox с формами работает очень плохо.

В модальной форме Ctools выполняет всю работу в фоновом режиме, которая имеет надлежащую поддержку обработки формы, которая просто не принадлежит Colorbox. Это также означает, что если вам нужно «модально» получить неподдерживаемую форму, тогда вы всегда знаете, что благодаря Ctools за ним есть твердый API, который вы можете переключить на него.

Бонусные баллы за подачу патча с поддержкой новой формы, если вы его напишете. ;)

ответил Letharion 4 Jpm1000000pmWed, 04 Jan 2012 22:55:08 +040012 2012, 22:55:08
6

Используйте 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, где вы увидите ссылку «Магический Модаль», которая должна показывать вам модальную форму после щелчка.

ответил kenorb 11 Jpm1000000pmMon, 11 Jan 2016 17:57:23 +030016 2016, 17:57:23
2

Я нахожу, что Simple Dialog - отличный способ предоставить формы в модалях. Это имеет преимущество использования jQuery UI, который находится в ядре.

Все, что вам нужно сделать, это предоставить ссылку на форму с дополнительной информацией. Он предоставляет простой метод, основанный на классах и тегах rel, или метод темы для более тонкого контроля. Я сделал это двумя способами:

  1. Атрибуты меню для предоставления требуемых тегов rel и class.
  2. theme_menu_link , чтобы переопределить функции визуализации ссылок в меню.
ответил Queenvictoria 20 PM00000020000003731 2013, 14:11:37
2

Необходимый модуль https://drupal.org/project/popup_forms , но вам нужно для выполнения некоторых программ для его применения (т. е. он не может быть просто настроен через интерфейс администратора).

ответил Code Your Dream 7 +04002013-10-07T13:38:57+04:00312013bEurope/MoscowMon, 07 Oct 2013 13:38:57 +0400 2013, 13:38:57

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132