답변:
내가 현재 알고있는 두 가지 좋은 옵션이 있습니다 : iframe (예 : 컬러 박스) 및 CTools. 사용할 옵션은 상황에 따라 다릅니다. CTools modal.html 파일에서 찾은이 정보가 주요 차이점을 가져온 것 같습니다.
CTools는 양식을 배치하기위한 팝업으로 사용할 수있는 간단한 모달을 제공합니다. iframe을 통해 작업을 수행하지 않는다는 점에서 일반적인 모달 프레임 워크와 다릅니다. 이것은 장점이자 단점입니다. iframe은 단순히 하위 브라우저에서 일반 페이지를 렌더링하고 작업을 수행 할 수 있습니다. 따라서 임의의 페이지와 양식을 모달에 넣기가 훨씬 쉽습니다. 그러나 iframe은 실제로 변경 내용을 메인 페이지에 전달하는 데별로 좋지 않으므로 모달을 열고 작업을 수행 한 다음 페이지를 수정할 수 없습니다.
이 주제에 대한 CTools에 대한 개인적인 경험이 없으므로 다른 것을 추가 할 수는 없지만 몇 가지 프로젝트에서 iframe 방법을 구현했습니다. 가장 최근에는 Colorbox 플러그인을 사용하여 Webform 모듈로 만든 몇 가지 양식을 팝업으로 표시했습니다. 관심이 있으시면 여기에 예제 코드를 추가하겠습니다.
양식에 연결 :
<a class="colorbox_form" href="'.url('node/5').'">'.t('Send message').'</a>팝업에서 링크 된 주소를 여는 자바 스크립트 코드 :
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를 사용하지 않는 사용자가 일반 템플릿으로 양식을 볼 수 있도록 javascript를 사용하여 링크에 'colorbox = true'를 첨부했습니다. 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');
}
}사용자가 링크를 클릭 할 때 양식을 모달에 삽입 할 수있는 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위치 로 이동 하십시오. '마법 모달'링크가 표시되면 클릭하면 모달 양식이 표시됩니다.
내가보고 시작할 것 모달 양식 대신 Colorbox의. 폼과 함께 Colorbox를 사용하면 실제로 작동하지 않기 때문에 특히 존재합니다.
모달 형식에서 Ctools 는 백그라운드에서 모든 작업을 수행하므로 Colorbox에 속하지 않는 양식 처리를 올바르게 지원합니다. 즉, 지원되지 않는 양식을 "모달"해야 할 경우 Ctools 덕분에 그 뒤에 전환 할 수있는 견고한 API가 있다는 것을 항상 알고 있습니다.
패치 작성시 새로운 양식을 지원하는 보너스 파일. ;)
나는 찾아 간단한 대화는 조동사의 양식을 제공 할 수있는 좋은 방법입니다. 핵심 인 jQuery UI를 사용할 수 있다는 장점이 있습니다.
추가 정보가 포함 된 양식에 대한 링크를 제공하기 만하면됩니다. 클래스 및 rel 태그를 기반으로하는 간단한 방법 또는보다 세밀하게 조정 된 테마를 제공합니다. 나는 두 가지 방법으로 이것을했다 :
필요한 모듈은 https://drupal.org/project/popup_forms 이지만 적용하려면 프로그램을 작성해야합니다 (즉, 관리 인터페이스를 통해 구성 할 수 없음).