Page call back of the page ypu want to add the modal
/**
* My callback function
*/
function my_module_my_callback() {
//adding modal settings
my_module_add_modal();
// add the js file to call the modal
drupal_add_js(drupal_get_path('module', 'my_module') . '/js/my_module_modal.js');
}
/**
* Helper function to change modal style
*/
function my_module_add_modal() {
// Load the modal library and add the modal javascript.
ctools_include('modal');
ctools_modal_add_js();
$modal_style = array(
'my-modal-style' => array(
'modalTheme' => 'CToolsModalDialog',
'throbberTheme' => 'CToolsModalThrobber',
'modalSize' => array(
'type' => 'fixed',
'width' => 165,
'height' => 80,
'addWidth' => 10,
'addHeight' => 10,
),
'modalOptions' => array(
'opacity' => .6,
'background-color' => '#3482C3',
),
'closeText' => '',
'animation' => 'fadeIn',
'closeImage' => '',
),
);
//Add the style into the Drupal settings array
drupal_add_js($modal_style, 'setting');
}
Inside JS file
jQuery( document ).ready(function($) {
$('.my_slector_open').click(function(){
//open the modal in the click function
Drupal.CTools.Modal.show('my-modal-style');
})
$('.my_slector_close').click(function(){
//close the modal in the click function
Drupal.CTools.Modal.dismiss();
})
});