I am using ctools modal dialog/popup window to display some records. The default close button is working fine. How can I add a custom close button?


  • What do you mean by custom close button? When you say the default button is working fine, it sounds like you don't have any problems. What are you trying to do? – Patrick Kenny May 4 '12 at 7:53
  • I need this extra button for better user interface. – Umar May 4 '12 at 11:55

As for this issue commited on November '11, you should be able to close any CTools modal window with a link that has the class "ctools-close-modal"

For example, in my modal I've got this for element to cancel and close:

  $form['actions']['cancel'] = array(
    '#markup' => l(t('Cancel'), '#',
         'attributes' => array(
           'class' => 'ctools-close-modal'
         'external' => TRUE
  • 1
    Actually, your answer is the same as mine. – kalabro Jul 20 '12 at 10:10
  • yup, but yours is not translation safe, and I like to use more l than raw html – pcambra Nov 11 '12 at 19:12
  • FYI: I edited the answer, There is no need to have inline javascript in the link tag, that is very bad practice, Also the fragment property isn't needed. – ericduran Jun 21 '13 at 14:41

Just add CSS class ctools-close-modal to any element inside the dialog like this:

$form['close_link']['#markup'] = '<span class="ctools-close-modal"> × </span>
<a href="#" class="ctools-close-modal">or click here.</span>';
  • Thanks Kakabro for your help. I tried the code as $form['actions']['cancel_button2'] = array( '#markup' => '<span class="ctools-close-modal"> × </span><a href="#" class="ctools-close-modal">or click here.</span>', ); but its not working. I have opened the view developed page in ctools model. I tried this `// add a close popup button $form['actions']['cancel_button'] = array( '#type' => 'submit', '#value' => t('Save'), '#submit' => array('close_model_dialog'), );' and submit – Umar May 4 '12 at 12:03
  • // function to close the model dialog function close_model_dialog($form, &$form_state) { ctools_include('ajax'); ctools_include('modal'); $form_state['redirect'] = TRUE; $form_state['redirect'] = "fee/add"; $output = array(); $output[] = ctools_modal_command_dismiss(); print ajax_render($output); exit; } but its not working as showing error in case of paging in view. – Umar May 4 '12 at 12:03
  • "but its not working." — it works and I'm kaLabro :) – kalabro May 4 '12 at 14:21
  • 2
    Umar the information you placed in these comments should be a part of your question. Potential answerers may not read comments under an answer, but they will if its in the question. You can edit your question to improve it at any time., maybe under a heading such as "Additional Information" to distinguish what you have added. – Ashlar May 4 '12 at 14:22
  • Umar, this is what I did after trying both these solutions: $form['actions']['cancel'] = array( '#type' => 'submit', '#button_type' => 'cancel', '#value' => t('Cancel'), '#limit_validation_errors' => array(), '#attributes' => array('class' => array('ctools-close-modal')), ); or if your Cancel button already exists, $form['actions']['cancel']['#attributes']['class'][] = 'ctools-close-modal'; – Michael Greisman Dec 3 '13 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.