Drupal form ajax submit button bootstrap dialogue confirm box

As you can see in the demo the first button shows a regular AJAX submit button and the second shows our custom button with the bootstrap modal confirmation box. I think it works great. The code below shows how I did it.

In your form builder function you need to add a submit button and modal window markup like the below. It is just a normal AJAX submit button but note the AJAX event is using a custom trigger, in this case your_custom_click. I also added the classes to style the button and to easily identify it in jQuery.

  
$form['submit_dialogue'] = array(
    '#type' => 'submit',
    '#value' => t("Click me, I'm a special AJAX confirm button"),
    '#ajax' => array(
      'callback' => 'your_callback',
      'wrapper' => 'your-wrapper-id',
      'method' => 'replace',
      'effect' => 'fade',
      'progress' => array(
        'type' => 'throbber',
        'message' => '',
      ),
      'event' => 'your_custom_click',
    ),
    '#attributes' => array(
      'class' => array(
        'btn-warning',
        'btn-special',
      ),
    ),
  );
  $form['modal'] = array(
    'modal' => array(
      'content' => array(
        'header' => array(
          'close' => array(
            '#theme' => 'button',
            '#value' => '×',
            '#button_type' => 'button',
            '#attributes' => array(
              'class' => array('close'),
              'data-dismiss' => 'modal',
            ),
          ),
          'title' => array(
            '#markup' => t('This is an example confirmation dialogue box.'),
            '#prefix' => '<h4 class="modal-title">',
            '#suffix' => '</h4>',
          ),
          '#prefix' => '<div class="modal-header">',
          '#suffix' => '</div>',
        ),
        'body' => array(
          'para' => array(
            '#markup' => t('Press Confirm to submit the form using AJAX, or click Cancel to close the dialogue box and do nothing.'),
            '#prefix' => '<p>',
            '#suffix' => '</p>',
          ),
          '#prefix' => '<div class="modal-body">',
          '#suffix' => '</div>',
        ),
        'footer' => array(
          'submit' => array(
            '#theme' => 'button',
            '#value' => t('Confirm'),
            '#button_type' => 'button',
            '#attributes' => array(
              'class' => array('btn', 'btn-success'),
              'data-dismiss' => 'modal',
            ),
          ),
          'close' => array(
            '#theme' => 'button',
            '#value' => t('Cancel'),
            '#button_type' => 'button',
            '#attributes' => array(
              'class' => array('btn', 'btn-warning'),
              'data-dismiss' => 'modal',
            ),
          ),
          '#prefix' => '<div class="modal-footer">',
          '#suffix' => '</div>',
        ),
        '#prefix' => '<div class="modal-content">',
        '#suffix' => '</div>',
      ),
      '#prefix' => '<div class="modal-dialog">',
      '#suffix' => '</div>',
    ),
    '#prefix' => '<div id="your-modal-id" class="modal fade" role="dialog">',
    '#suffix' => '</div>',
  );

To make the submit button produce the dialogue box we need to add some jQuery:

  
(function ($) {
Drupal.behaviors.yourModuleName = {
  attach: function (context, settings) {
    var specialButton = $('.btn-special', context);
    var modalConfirm = $("#your-modal-id", context);
    specialButton.mousedown(function() {
      specialButton.prop('disabled', true);
      modalConfirm.modal('show');
    });
    modalConfirm.on('hidden.bs.modal', function () {
      specialButton.prop('disabled', false);
    });
    $('.btn-success', modalConfirm).on('click', function() {
      specialButton.prop('disabled', false);
      specialButton.trigger('your_custom_click');
    });
  }
};
})(jQuery);