Question

I am attempting to use the jQuery UI dialog script in my WordPress theme admin page. Everything is straight from the UI demo and yet I end up with a dialog box where the dialog is not popped up over anything and instead buried in bottom corner, just before the closing body tag.

The UI dialog script is queued properly w/ wp_enqueue_script as its shows up in the source code as does jquery (from google API) and the UI core.

jQuery(document).ready(function($) {
    $("#dialog").dialog();
}); //end onload stuff

Then I have this in my options page:

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Answer 1

You should be all ready to go. WP already has dialog and styles for it.

Here are the steps to use it:

1. Write the jQuery for creating the dialog box – you must use the dialogClass of wp-dialog
2. Enqueue the above file on init using the proper dependencies (jquery-ui-dialog)
3. Enqueue the proper WP styles (wp-jquery-ui-dialog)

For example:

// custom.js
jQuery(function($) {
    var $info = $("#modal-content");
    $info.dialog({                   
        'dialogClass'   : 'wp-dialog',           
        'modal'         : true,
        'autoOpen'      : false, 
        'closeOnEscape' : true,      
        'buttons'       : {
            "Close": function() {
                $(this).dialog('close');
            }
        }
    });
    $("#open-modal").click(function(event) {
        event.preventDefault();
        $info.dialog('open');
    });
});    

In your PHP

add_action( 'admin_enqueue_scripts', 'queue_my_admin_scripts');

function queue_my_admin_scripts() {
    wp_enqueue_script (  'my-spiffy-miodal' ,       // handle
                        URL_TO_THE_JS_FILE  ,       // source
                        array('jquery-ui-dialog')); // dependencies
    // A style available in WP               
    wp_enqueue_style (  'wp-jquery-ui-dialog');
}