Jquery UI dialog in wordpress admin

3 Views

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.

Read More
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>
Post Views: 3

Related posts

Leave a Reply

3 comments

  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');
}

  2. I manged to show the dialog using the following code (but styling was not 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:

    $("#dialog-view").dialog({
   height: 240,
   modal: true
});

  3. I don’t know if it makes any difference (because I’m not in the right place to do any testing at the moment), but maybe try the code exactly as it is on the jQuery UI site:

    $(function() {
   $("#dialog").dialog();
});

    Best of luck! ^.^