Last active
August 29, 2015 14:15
-
-
Save krystianbuczak/626b3bb2c7f60a665335 to your computer and use it in GitHub Desktop.
Use ctools modal to display content in special modal
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* @file Custom modal using ctools modal window | |
* more infor in sites/modules/ctools/help/modal.html your local drupal's installation | |
*/ | |
/** | |
* Implements of hook_menu() | |
*/ | |
function custom_popup_menu() { | |
$items['modal/%ctools_js/%'] = array( | |
//'title' => 'Popup', | |
'page arguments' => array(1, 2), | |
'page callback' => 'module_modal_page', | |
'access callback' => TRUE, | |
'type' => MENU_NORMAL_ITEM, | |
); | |
return $items; | |
} | |
/** | |
* A modal page callback. | |
*/ | |
function module_modal_page($js = NULL, $other_params_if_needed) { | |
if ($js) { | |
// Required includes for ctools to work: | |
ctools_include('modal'); | |
ctools_include('ajax'); | |
} | |
$modal_title = ''; | |
$modal_content = ''; | |
// use ctools_modal_render() | |
return ctools_modal_render($modal_title, $modal_content); | |
} | |
/** | |
* Implements hook_init(). | |
*/ | |
function module_page_alter(&$page) { | |
// use any other hook, function to attach below elements | |
// Include the CTools tools that we need. | |
ctools_include('ajax'); | |
ctools_include('modal'); | |
// Add CTools' javascript to the page. | |
ctools_modal_add_js(); | |
// set modal style properties | |
$module_style = array( | |
'module-modal-style' => array( | |
'modalSize' => array( | |
'type' => 'scale', | |
'width' => 0.4, | |
'height' => 0.3, | |
'addWidth' => 0, | |
'addHeight' => 0, | |
'contentRight' => 0, | |
'contentBottom' => 0, | |
), | |
'modalOptions' => array( | |
'opacity' => .8, | |
'background-color' => '#000', | |
), | |
'animation' => 'slideDown', | |
'modalTheme' => 'custom_popup_modal', | |
// set custom close button and throbber | |
'throbber' => theme('image', array( | |
'path' => ctools_image_path('ajax-loader.gif', 'module'), | |
'alt' => t('Loading...'), | |
'title' => t('Loading') | |
)), | |
'closeImage' => theme('image', array( | |
'path' => ctools_image_path('modal-close.png', 'module'), | |
'alt' => t('Close window'), | |
'title' => t('Close window') | |
)), | |
), | |
); | |
// Add the settings array defined above to Drupal JS settings: | |
drupal_add_js($module_style, 'setting'); | |
// add js file in js directory | |
ctools_add_js('module', 'module'); | |
// add css file in css directory | |
ctools_add_css('module', 'module'); | |
$href = 'modal/ajax/' . $other_params_if_needed; | |
// generate link to click to the class: ctools-modal-module-modal-style is important | |
$link = ctools_modal_text_button($name, $href, t('Display @name', array('@name' => $name)), 'ctools-modal-module-modal-style'); | |
// attach that link somewhere in the page content | |
} | |
//------------------------------------------------------ | |
// Place in JS file | |
//------------------------------------------------------ | |
/** | |
* Provide the HTML to create the modal dialog. | |
*/ | |
(function ($) { | |
Drupal.theme.prototype.custom_popup_modal = function () { | |
var html = ''; | |
html += '<div id="ctools-modal" class="popups-box">'; | |
html += ' <div class="ctools-modal-content ctools-modal-custom_popup-modal-content">'; | |
html += ' <span class="popups-close"><a class="close" href="#">' + Drupal.CTools.Modal.currentSettings.closeImage + '</a></span>'; | |
html += ' <div class="modal-scroll"><div id="modal-content" class="modal-content popups-body"></div></div>'; | |
html += ' </div>'; | |
html += '</div>'; | |
return html; | |
} | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment