Using Ctools modal in Drupal with Javascript

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

});