Boîte de dialogue Jquery UI dans wordpress admin

Question

J'essaie d'utiliser le script de boîte de dialogue jQuery UI dans ma page d'administration de thème Wordpress. Tout est directement à partir de la démo de l'interface utilisateur et pourtant je me retrouve avec une boîte de dialogue qui ressemble à: http://flic.kr/p/8gAPt6 - notez que la boîte de dialogue n'est pas surgie au-dessus de tout et enterrée dans le coin inférieur, juste avant la balise de fermeture du corps. Le script de la boîte de dialogue de l'interface utilisateur est correctement mis en file d'attente avec le script wp_enqueue_script tel qu'il apparaît dans le code source, tout comme jquery (de google API) et le noyau de l'interface utilisateur.

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

J'ai dans ma page d'options:

<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

Vous devriez être tout prêt aller. WP a déjà un dialogue et des styles pour cela.

Voici les étapes pour l'utiliser:

1. Écrivez le jQuery pour créer la boîte de dialogue - vous devez utiliser le dialogClass de wp-dialog
2. Enqueue le fichier ci-dessus sur init en utilisant les dépendances appropriées (jquery-ui-dialog)
3. eNQUEUE les styles appropriés WP (wp-jquery-ui-dialog)

Par exemple:

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

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

Answer 2

Je ne sais pas si cela fait une différence (parce que je ne suis pas au bon endroit pour faire tout essai au moment), mais peut-être essayer le code exactement comme il est sur le site jQuery UI:

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

Bonne chance!^^

Answer 3

Je manged pour montrer la boîte de dialogue en utilisant le code suivant. (Mais le style n'a pas été appliquée!):

add_action('init', 'myplugin_load'); 

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

lors de l'appel utilisé:

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