你应该准备好了。WP已经有了对话框和样式。
以下是使用它的步骤：
1.编写用于创建对话框的jQuery-必须使用wp-dialog的dialogClass
1.使用正确的依赖项（jquery-ui-dialog）将上述文件入队到init上
1.入队正确的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');
}

我设法使用以下代码显示对话框（但没有应用样式！）：

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

我不知道这是否会有什么不同（因为我现在不适合做任何测试），但也许可以按照jQuery UI站点上的代码来尝试：

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

祝你好运！

第一步：添加脚本：

wp_enqueue_script( 'jquery-ui-dialog' );// in your function.php or plugin

第二步：创建对话框：

<div id="dialog-content" style="display:none;" class="dialog-content"> <div style="padding:100px;text-align:center;">Your Custom Content </div></div>

创建一个隐藏的内容框。这样你就可以把它显示为一个对话框。最后给一个按钮附加一个点击事件来调用这个对话框。

第三步：调用对话框：

//attach a click event then call the dialog 
  $('#dialog-calling-btn').click(function () {

    $("#dialog-content").dialog({
      'dialogClass': 'wp-dialog email-quote-box',
      'title': 'Title',
      'modal': true,
      'autoOpen': true,
      'closeOnEscape': true,
      'height': 500,
      'width': 360
    });
  })