I'm trying to make use of the jQuery UI dialog script during my Wordpress theme admin page. Things are completely from the UI demo but I finish track of a dialog box that appears like: http://flic.kr/p/8gAPt6 -- spot the dialog isn't put their hands up over anything and rather hidden in bottom corner, right before the closing body tag.

The UI dialog script is queued correctly w/ wordpress_enqueue_script since it's turns up within the source code along with jquery (from google API) and also the UI core.

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

I Quickly have this during 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>

I manged to exhibit the dialog while using following code (but styling wasn't applied!):

add_action('init', 'myplugin_load');

function myplugin_load(){
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-dialog' );

When calling it used:

   height: 240,
   modal: true

I'm not sure whether it makes any difference (because I am not in the best place to complete any testing right now), but maybe try the code exactly because it is around the jQuery UI site:

$(function() {

All the best! ^.^

May I requested the way you resolved this? I additionally observed all the jQuery dependencies, but wasn't sure how you can range from the full jQuery UI without conflicting with any already incorporated files.

You ought to be all all set to go. Wordpress already has dialog and designs for this.

Listed here are the steps for doing things:

  1. Write the jQuery for creating the dialog box - you have to make use of the dialogClass of wp-dialog
  2. Enqueue the above mentioned file on init while using proper dependencies (jquery-ui-dialog)
  3. Enqueue the correct Wordpress styles (wp-jquery-ui-dialog)

For instance:

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

Inside your PHP

add_action( 'admin_init', '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');