Диалоговое окно JQuery UI в wordpress admin

Я пытаюсь использовать диалог jQuery UI script на моей странице администрирования темы Wordpress. Все прямо из демонстрации UI, и все же я получаю диалоговое окно, которое выглядит так: http://flic.kr/p/8gAPt6 - обратите внимание, что диалог не выставляется ни о чем и вместо этого похоронен в нижнем углу, непосредственно перед закрывающим тегом тела.

Диалоговое окно пользовательского интерфейса script правильно помещается в w/wp_enqueue_script, как показано в исходном коде, как jQuery (из google API) и ядро ​​пользовательского интерфейса.

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

Тогда у меня есть это на моей странице настроек:

<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>

Ответы

Ответ 1

Вы должны быть готовы. WP уже имеет диалог и стили для него.

Вот шаги для его использования:

  • Напишите jQuery для создания диалогового окна - вы должны использовать dialogClass для wp-dialog
  • Завершите указанный файл на init с помощью соответствующих зависимостей (jquery-ui-dialog)
  • Заменить правильные стили WP (wp-jquery-ui-dialog)

Например:

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

В вашем 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

Мне удалось показать диалог, используя следующий код (но стиль не был применен!):

add_action('init', 'myplugin_load');

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

При вызове используется:

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

Ответ 3

Я не знаю, имеет ли значение какое-либо значение (потому что я не в нужном месте, чтобы провести какое-либо тестирование на данный момент), но, возможно, попробуйте код точно так же, как на сайте jQuery UI:

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

Удачи! ^. ^