This example uses the ajax callback on a form to provide a simple modal confirmation step using a custom sized window.

Here is our form.  We include the required ctools modal scripts and add our own script to control the confirm functionality.  The modal control is done by the action on the drupal js settings for 'CToolsModal'

function MYMODULE_form($form, $form_state, $items, $entity, $field) {

  drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/js/MYMODULE-modal.js');

  // This is the crucial part for window size control
  $settings['CToolsModal']['modalSize'] = array(
    'type' => 'fixed',
    'width' => 450,
    'height' => 250,
  drupal_add_js($settings, 'setting');

  $form['#prefix'] = '<div id="ajax-container"></div>';

  $form['fields'] = array(
    // Some form fields
  $form['button'] = array(
    '#type' => 'button',
    '#value' => t('Finish'),
    '#ajax' => array(
      'callback' => 'MYMODULE_confirm_ajax_callback',
      'wrapper' => 'ajax-container',
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
    '#attributes' => array('style'=> 'position: absolute; margin-left: -4000px;')

  return $form;

Here is our ajax callback function.  The ctools_modal_command_display() function uses the default 'CToolsModal' setting which we have just overridden

function MYMODULE_confirm_ajax_callback($form, $form_state) {
  // this function gets the $form_state after submitting the form. All values, including the submitted values preserved.
  $commands = array();
  $commands[] = ctools_modal_command_display(t('Confirm completion'),
    drupal_get_form('MYMODULE_confirm_form', $form, $form_state)
  print ajax_render($commands);

And the form function is as follows.  In this form we provide element ids for our custom JS.


function MYMODULE_confirm_form($arg1, $arg2, $node_form, $form_state) {

  $form['report'] = array(
    '#markup' => '<p>' . t('Do you wish to submit or cancel?  You
    cannot make any further changes if you submit.') . '</p>'

  $form['submit'] = array(
    '#type' => 'button',
    '#value' => 'Submit',
    '#attributes' => array('id' => 'MYMODULE-modal-submit')

  $form['cancel'] = array(
    '#type' => 'button',
    '#value' => 'cancel',
    '#attributes' => array('id' => 'MYMODULE-modal-cancel')

  return $form;

And finally the custom JS.  Depending on whether submit for cancel, we either submit the form or trigger the modal close.

  // Control behaviour of confirm modal
  Drupal.behaviors.multichoiceConfirm = {
    attach: function(context) {
      $('#multichoice-modal-submit').click(function() {
      $('#multichoice-modal-cancel').click(function() {
        return false;


Now we have a modal confirm form for our form submission whose size we can control and that is reasonably simple.


Blog comments

Submitted by John Mathew on Fri, 03/17/2017 - 09:44


You've examine the books and articles recommended in the manual or by way of your coach. You've give you a few ideas about how you would possibly method the query, and you've got a quite appropriate concept about how other historians have interpreted the problems and addressed the subject. You've accumulated some proof from a selection of different assets and you've attempted mapping out some preliminary thoughts and arguments on paper. You've looked again on the important issues of the challenge and idea about how you may deal with them on this best essay writing service( ). In order to devise your essay, you currently want to come up with an argument, a factor of view with a view to manual your writing towards a end.

User login