Skip to content

Instantly share code, notes, and snippets.

@krystianbuczak
Last active August 29, 2015 14:15
Show Gist options
  • Save krystianbuczak/626b3bb2c7f60a665335 to your computer and use it in GitHub Desktop.
Save krystianbuczak/626b3bb2c7f60a665335 to your computer and use it in GitHub Desktop.
Use ctools modal to display content in special modal
<?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