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(); }) });