Is it possible to use jQuery's modal dialog instead of the browser-standard alert when using ajax_command_alert()?

Question

I'd like to have a simple feedback form that is submitted via AJAX, using Drupal 7. Upon receipt of the form, I want a simple jQuery modal dialog to appear that will say something along the lines of "Thank you for your submission, etc.". The browser standard alert does accomplish this, but my client feels that this looks unprofessional, hence the desire for the more nicely styled jQuery dialog.

Using ajax_command_alert() causes the browser to use a simple alert() function. Is there any way to force usage of the jQuery modal dialog? For reference, my code is below:

function feedback_form($form, &$form_state) {

    $form['first_name'] = array(
        '#type' => 'textfield',
        '#title' => 'First Name',
    );

    $form['last_name'] = array(
        '#type' => 'textfield',
        '#title' => 'Last Name'
    );

    $form['email'] = array(
        '#type' => 'textfield',
        '#title' => 'Email'
    );

    $form['comments'] = array(
        '#type' => 'textarea',
        '#title' => 'Comments'
    );

    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => 'Submit Feedback',
        '#ajax' => array(
            'callback' => 'feedback_form_submit'
        )
    );

    return $form;
}

function feedback_form_submit($form, &$form_state) {
    $commands = array();
    $commands[] = ajax_command_alert("Form received");
    return array('#type' => 'ajax', '#commands' => $commands);
}

EDIT: I see that the alert function is defined in misc/ajax.js, under Drupal.ajax.prototype.commands. If I were to alter the JS file's implementation of alert, this would work - but that would be considered hacking core, I believe. How else could I alter this function?

Answer 1

I solved this problem in two ways - first, I added my own JS file which adds a modal option to Drupal's AJAX commands with the following JS code:

jQuery(function() {

    // Add modal dialog option to Drupal AJAX
    Drupal.ajax.prototype.commands.modal = function(ajax, response, status) {
        // Code to create a modal dialog goes here
    }   

});

Then, in my AJAX callback on the server, I used the following code:

function feedback_form_submit($form, &$form_state) {
    return array(
        '#type' => 'ajax', 
        '#commands' => array(
            array(
                'command' => 'modal',
                'text' => "Form submission successful!"
            )
        )
    );
}

Answer 2

function feedback_form($form, &$form_state) {
  ...
  $form['#attached']['library'][] = array('system', 'ui.dialog');
  ...
}

function feedback_form_submit($form, &$form_state) {
  $commands[] = ajax_command_append('body', '<div id="dialog" class="element-hidden">Form received</div>');
  $commands[] = ajax_command_invoke('#dialog', 'dialog');
  return array('#type' => 'ajax', '#commands' => $commands);
}