Tengo un formulario y estoy usando Drupal 7. Necesito mostrar este formulario en una ventana emergente cuando un usuario hace clic en un enlace. El usuario debería poder completar el formulario en la ventana emergente. Puedo usar cualquier cosa como Colorbox o modals o cualquier cosa. Solo quería saber cuál es la mejor opción y qué opciones tengo para Drupal.
Respuestas:
Hay dos buenas opciones que conozco actualmente: iframe (en colorbox, por ejemplo) y CTools. La opción a usar depende de las circunstancias. Supongo que esta información que encontré en el archivo modal.html de CTools resalta la diferencia principal:
CTools proporciona un modal simple que se puede usar como una ventana emergente para colocar formularios. Se diferencia de los marcos modales normales en que no hace su trabajo a través de un iframe. Esto es tanto una ventaja como una desventaja. El iframe simplemente presenta páginas normales en un sub-navegador y pueden hacer lo suyo. Eso hace que sea mucho más fácil poner páginas y formularios arbitrarios en un modal. Sin embargo, el iframe no es muy bueno para comunicar los cambios a la página principal, por lo que no puede abrir el modal, hacer que funcione y luego modificar la página.
No tengo experiencia personal con CTools en este tema, así que no puedo agregar nada más, pero he implementado el método iframe en un par de proyectos. En el más reciente, utilicé el complemento Colorbox para mostrar algunos formularios creados con el formulario web módulo en una ventana emergente. Agregaré un código de ejemplo aquí en caso de que haya algún interés.
Enlace al formulario:
<a class="colorbox_form" href="'.url('node/5').'">'.t('Send message').'</a>Código Javascript para abrir la dirección vinculada en una ventana emergente:
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});
}En el archivo de plantilla del 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();
}
}Adjunté 'colorbox = true' a los enlaces usando javascript para que los usuarios con javascript desactivado vieran el formulario con la plantilla normal. La plantilla de iframe solo tiene mensajes, título y contenido impresos.
Esto ya funciona, pero me encontré con un problema con Webforms: 'colorbox = true' no se conservó cuando se envió el formulario. Mi intento de arreglarlo:
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 puede insertar un formulario en un modal cuando un usuario hace clic en un enlace.
Consulte el siguiente tutorial: inserte un formulario en un modo emergente con CTools y Drupal 7 que simplifica este proceso en pocos pasos.
Básicamente, debe definir su hook_menu()devolución de llamada para su forma modal:
$items['mymodule/%ctools_js'] = array(
'page callback' => 'mymodule_callback',
'page arguments' => array(1),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);luego cree un generador de enlaces que devuelva el 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 pueda usarse en la devolución de llamada de su página, por ejemplo:
/**
* 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');
}Cuando el usuario hace clic en el enlace, se hace la solicitud, ya sea a /mymodule/ajax, o /mymodule/nojs(en el caso de nojs), por lo que los siguientes manijas de devolución de llamada creando un 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');
}
} Ahora solo necesita crear un formulario y su controlador de envío como se muestra a continuación:
/**
* 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 probar eso, vaya a: /mymodule/pagedonde debería ver el enlace 'Magical Modal' que debería mostrarle la forma modal una vez que haga clic.
Empezaría a mirar la forma modal , en lugar de Colorbox. Existe específicamente porque usar Colorbox con formularios funciona realmente mal.
En forma modal, Ctools hace todo el trabajo en segundo plano, que tiene soporte adecuado para el manejo de formularios que simplemente no pertenece a Colorbox. Eso también significa que si necesita "modal" un formulario no compatible, siempre sabrá que gracias a Ctools hay una API sólida detrás de la cual puede cambiar.
Puntos de bonificación por presentar un parche con soporte para formularios nuevos si lo escribe. ;)
Creo que Simple Dialog es una excelente manera de proporcionar formularios en Modals. Tiene la ventaja de usar jQuery UI que está en el núcleo.
Todo lo que necesita hacer es proporcionar un enlace al formulario con información adicional. Proporciona un método simple basado en clases y etiquetas rel, o un método de tema para un control más ajustado. Lo he hecho de dos maneras:
El módulo que necesita es https://drupal.org/project/popup_forms , pero necesita hacer algo de programación para aplicarlo (es decir, no se puede configurar simplemente a través de la interfaz de administración).