Eu tenho um formulário e estou usando o Drupal 7. Preciso mostrar esse formulário em um pop-up quando um usuário clica em um link. O usuário deve poder preencher o formulário enquanto estiver na janela pop-up. Eu posso usar qualquer coisa como Colorbox ou modais ou qualquer coisa. Eu só queria saber qual é a melhor opção e quais opções tenho para o Drupal.
Atualmente, existem duas boas opções: iframe (na caixa de cores, por exemplo) e CTools. Qual opção usar depende das circunstâncias. Eu acho que essas informações que encontrei no arquivo modalool.html do CTools traz a principal diferença:
CTools fornece um modal simples que pode ser usado como um pop-up para colocar formulários. Difere das estruturas modais normais, pois não realiza seu trabalho por meio de um iframe. Isso é uma vantagem e uma desvantagem. O iframe simplesmente renderiza páginas normais em um sub-navegador e eles podem fazer o que precisam. Isso facilita muito colocar páginas e formulários arbitrários em um modal. No entanto, o iframe não é muito bom na comunicação de alterações na página principal; portanto, você não pode abrir o modal, fazer algum trabalho e modificar a página.
Não tenho experiência pessoal com o CTools sobre esse assunto, portanto não posso acrescentar mais nada a isso, mas implementei o método iframe em alguns projetos. No mais recente, usei o plugin Colorbox para mostrar alguns formulários criados com o Webform módulo em um pop-up. Vou adicionar um código de exemplo aqui, caso haja algum interesse.
Link para o formulário:
<a class="colorbox_form" href="'.url('node/5').'">'.t('Send message').'</a>Código Javascript para abrir o endereço vinculado em um pop-up:
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});
}No arquivo de modelo do tema:
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();
}
}Anexei 'colorbox = true' aos links usando javascript para que os usuários com o javascript desativado vissem o formulário com o modelo normal. O modelo iframe possui apenas mensagens, título e conteúdo impressos.
Isso já funciona, mas encontrei um problema com os Webforms: 'colorbox = true' não foi preservado quando o formulário foi enviado. Minha tentativa de corrigi-lo:
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');
}
}Use CTools, que pode inserir um formulário em um modal quando um usuário clica em um link.
Verifique o seguinte tutorial: Insira um formulário em um modal pop-up com CTools e Drupal 7, que simplifica esse processo em algumas etapas.
Basicamente, você precisa definir seu hook_menu()retorno de chamada para seu formulário modal:
$items['mymodule/%ctools_js'] = array(
'page callback' => 'mymodule_callback',
'page arguments' => array(1),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);crie um gerador de link que retorne o código 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>';
}para que possa ser usado no retorno de chamada da sua página, por exemplo:
/**
* 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');
}Quando o usuário clica no link, ele faz uma solicitação para /mymodule/ajaxou /mymodule/nojs(no caso de nojs), para que o seguinte retorno de chamada lide com a criação de um modal:
/**
* 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');
}
} Agora você só precisa criar um formulário e seu manipulador de envio, como abaixo:
/**
* 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);
}Para testar isso, vá para: /mymodule/pageonde você deve ver o link 'Magical Modal', que deve mostrar o formulário modal depois de clicar.
Eu começaria a olhar para o formulário Modal , em vez do Colorbox. Existe especificamente porque o uso do Colorbox com formulários funciona muito mal.
No formato modal, o Ctools faz todo o trabalho em segundo plano, com suporte adequado para o tratamento de formulários que simplesmente não pertence ao Colorbox. Isso também significa que, se você precisar "modal" um formulário não suportado, sempre saberá que, graças ao Ctools, existe uma API sólida por trás da qual você pode alternar.
Pontos de bônus por arquivar um patch com novo suporte de formulário, se você o escrever. ;)
Acho que o Simple Dialog é uma ótima maneira de fornecer formulários nos Modais. Tem a vantagem de usar a interface do usuário do jQuery, que é essencial.
Tudo que você precisa fazer é fornecer um link para o formulário com algumas informações adicionais. Ele fornece um método simples baseado em classes e tags rel, ou um método de tema para um controle mais preciso. Eu fiz isso de duas maneiras:
fonte
O módulo que você precisa é https://drupal.org/project/popup_forms , mas você precisa fazer alguma programação para aplicá-lo (ou seja, ele não pode ser configurado apenas através da interface de administração).
fonte