How to customize CTools modal window


CTools ( provides great modular ekhm... tools which are very easy to use, but sometimes documentation is not as easy to find.
I prefer using CTools to build modal window because i haven't to add additional js script to huge scripts list which Drupal loading. Also it is simplest way to display e.g. login form or views in modal window.
But... I've spent much time to find how to customize default CTools modal window and therefore my first tip is:
Install advanced_help ( module and then you can find good official documentation on Your site. Just go to

Get raw version
  1. /**
  2.  * Implements hook_init()
  3.  */
  4. function my_cool_module_init() {
  5. //Customize modal window
  6. drupal_add_js(array(
  7. 'my-cool-module-modal' => array(
  8. 'modalSize' => array(
  9. 'type' => 'fixed',
  10. 'width' => 850,
  11. 'height' => 550,
  12. ),
  13. //Animation mode
  14. 'animation' => 'fadeIn',
  15. ),
  16. ), 'setting');
  17. }
  19. //Next, add class "ctools-modal-my-cool-module-modal" to link/button which trigger the modal window.


sebas5384's picture

Just complementing with this snippet, there's a patch to make your modals more customized.
For each style you define for example: my-cool-module-modal the patch will put a class in the modal and overlay for further custom styles.


Janeth's picture


How can I change the modal window animation? Currently it appears from left to the center of the window. I would like a nice fade in fade out effect but I have no clue how to do that. Could you please explain me?



sri20198's picture

I have added the Drupal settings in the hook_init(), the trigger link has been set with the ctools-modal-{setting_name}. But, when the link is clicked, it goes to the nojs page with the error:
Fatal error: [] operator not supported for strings in D:\wamp\www\drpl7-training\includes\ on line 2445

What am I missing?
Using Drupal 7.26, cTools 7.x-1.3.


iampuma's picture

You could have looked into the Ctools module itself and you would realize Ctools comes with all sorts of examples. Take a look at line 123 in ctools/ctools_ajax_sample/ctools_ajax_sample.module for custom sample styles.

Vasiliy's picture

Thank you. Great snippet