Ich habe ein Formular und verwende Drupal 7. Ich muss dieses Formular in einem Popup-Fenster anzeigen, wenn ein Benutzer auf einen Link klickt. Der Benutzer sollte dann in der Lage sein, das Formular im Popup-Fenster auszufüllen. Ich kann irgendetwas wie Colorbox oder Modals oder irgendetwas verwenden. Ich wollte nur wissen, welche Option die bessere ist und welche Optionen ich für Drupal habe.
Antworten:
Ich kenne derzeit zwei gute Optionen: iframe (z. B. in Colorbox) und CTools. Welche Option zu verwenden ist, hängt von den Umständen ab. Ich denke, diese Informationen, die ich in der Datei CTools modal.html gefunden habe, machen den Hauptunterschied deutlich:
CTools bietet ein einfaches Modal, das als Popup zum Platzieren von Formularen verwendet werden kann. Es unterscheidet sich von den normalen Modal Frameworks dadurch, dass es seine Arbeit nicht über einen iframe erledigt. Dies ist sowohl ein Vorteil als auch ein Nachteil. Der iframe rendert einfach normale Seiten in einem Subbrowser und sie können ihr Ding machen. Das macht es viel einfacher, beliebige Seiten und Formulare in einem Modal zu platzieren. Der iframe ist jedoch nicht sehr gut darin, Änderungen an der Hauptseite zu kommunizieren. Sie können das Modal also nicht öffnen, es etwas arbeiten lassen und dann die Seite ändern.
Ich habe keine persönlichen Erfahrungen mit CTools zu diesem Thema, daher kann ich dem nichts hinzufügen, aber ich habe die iframe-Methode in einigen Projekten implementiert. In der letzten Version habe ich das Colorbox- Plugin verwendet, um einige mit dem Webform- Modul erstellte Formulare in einem Popup anzuzeigen. Ich füge hier einen Beispielcode hinzu, falls Interesse besteht.
Link zum Formular:
<a class="colorbox_form" href="'.url('node/5').'">'.t('Send message').'</a>Javascript-Code zum Öffnen der verlinkten Adresse in einem Popup:
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});
}In der Designvorlagendatei:
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();
}
}Ich habe 'colorbox = true' mit Javascript an die Links angehängt, damit Benutzer mit deaktiviertem Javascript das Formular mit der normalen Vorlage sehen. In der iframe-Vorlage werden nur Nachrichten, Titel und Inhalt gedruckt.
Dies funktioniert bereits, aber ich bin auf ein Problem mit Webforms gestoßen: 'colorbox = true' wurde beim Absenden des Formulars nicht beibehalten. Mein Versuch, es zu beheben:
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');
}
}Verwenden Sie CTools, mit denen Sie ein Formular in ein Modal einfügen können, wenn ein Benutzer auf einen Link klickt.
Bitte überprüfen Sie das folgende Tutorial: Fügen Sie mit CTools und Drupal 7 ein Formular in ein Popup-Modul ein, das diesen Vorgang in wenigen Schritten vereinfacht.
Grundsätzlich müssen Sie Ihren hook_menu()Rückruf für Ihr modales Formular definieren:
$items['mymodule/%ctools_js'] = array(
'page callback' => 'mymodule_callback',
'page arguments' => array(1),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);Erstellen Sie dann einen Link-Generator, der den HTML-Code zurückgibt:
/**
* 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>';
}So kann es in Ihrem Seitenrückruf verwendet werden, zB:
/**
* 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');
}Wenn der Benutzer auf den Link klickt, wird entweder eine Anfrage an /mymodule/ajaxoder /mymodule/nojs(im Fall von nojs) gesendet, sodass der folgende Rückruf das Erstellen eines Modals behandelt:
/**
* 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');
}
} Jetzt müssen Sie nur noch ein Formular und seinen Submit-Handler wie folgt erstellen:
/**
* 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);
}Um dies zu testen, gehen Sie zu: /mymodule/pagewo Sie den Link 'Magical Modal' sehen sollten, der Ihnen die modale Form zeigen sollte, sobald Sie darauf geklickt haben.
Ich würde anfangen, Modal Form zu betrachten , anstatt Colorbox. Es existiert speziell, weil die Verwendung von Colorbox mit Formularen sehr schlecht funktioniert.
In modaler Form erledigt Ctools die gesamte Arbeit im Hintergrund. Dies unterstützt die Formularverarbeitung, die in Colorbox einfach nicht enthalten ist. Das bedeutet auch, dass Sie, wenn Sie ein nicht unterstütztes Formular "modalisieren" müssen, immer wissen, dass dank Ctools eine solide API dahinter steckt, zu der Sie stattdessen wechseln können.
Bonuspunkte für das Einreichen eines Patches mit Unterstützung für neue Formulare, wenn Sie ihn schreiben. ;)
Ich finde, dass Simple Dialog eine großartige Möglichkeit ist, Formulare in Modals bereitzustellen. Es hat den Vorteil, dass die jQuery-Benutzeroberfläche im Kern verwendet wird.
Sie müssen lediglich einen Link zum Formular mit einigen zusätzlichen Informationen bereitstellen. Es bietet eine einfache Methode, die auf Klassen und rel-Tags basiert, oder eine Theme-Methode zur genaueren Steuerung. Ich habe das auf zwei Arten gemacht:
Das Modul, das Sie benötigen, ist https://drupal.org/project/popup_forms , aber Sie müssen einige Programmierungen vornehmen, um es anzuwenden (dh es kann nicht einfach über die Administrationsoberfläche konfiguriert werden).