wordpress 3.3.1插件管理页面上的JQueryUI模式对话框表单不是'；弹出'；

我写了一个WORDPRESS插件，用于维护aBiz的Branches数据。。在aDMIN区域中，在自定义的新TopLevel菜单及其子菜单下（下面的代码来自该子菜单的窗体。插件激活并创建TopLevel菜单和子菜单非常好。

但是，我的潜水（弹出）(

ThxNeal

<div class="wrap" id="main">
<form name="Sandwich Baron Branch Maintenance" method="post" action="<?php echo str_replace( '%   7E', '~', $_SERVER['REQUEST_URI']); ?>">
<style>    
 body { font-size: 62.5%; }     
 label, input { display:block; }    
 input.text { margin-bottom:12px; width:95%; padding: .4em; }     
 fieldset { padding:0; border:0; margin-top:25px; }     
 h1 { font-size: 1.2em; margin: .6em 0; }     
 div#users-contain { width: 350px; margin: 20px 0; }     
 div#users-contain table 
{ margin: 1em 0; border-collapse: collapse; width: 100%; }    
    div#users-contain table td, div#users-contain table th 
{ border: 1px solid #eee;  padding: .6em 10px; text-align: left; }     
.ui-dialog .ui-state-error { padding: .3em; }     
.validateTips { border: 1px solid transparent; padding: 0.3em; } 
</style>


<?php 
add_action('admin_init', 'register_jquery_ui');
function register_jquery_ui() {
//apparently all that is required is the dependancy 'jquery-ui-dialog' (wp auto includes all this in the admin section, ...but whether that or this I have the same problem)
 wp_enqueue_script('jquery');
 wp_enqueue_script('jquery-ui-core');
 wp_enqueue_script('jquery-ui-dialog');
 wp_enqueue_script('jquery-ui-1.8.17.custom.min' );
 wp_enqueue_script('jquery-bgiframe-2.1.2' );
 wp_enqueue_script('jquery-ui-mouse' );
 wp_enqueue_script('jquery-ui-button' );
 wp_enqueue_script('jquery-ui-draggable' );
 wp_enqueue_script( ‘jquery-ui-droppable’);
 wp_enqueue_script( ‘jquery-form’ );
 wp_enqueue_script('jquery-ui-position' );
 wp_enqueue_script('jquery-ui-resizable' );
 wp_enqueue_script('jquery-effects-core' );
 wp_enqueue_script('jquery-ui-widget' ); 
 wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css'); 
 // or A style available in WP 
 // wp_enqueue_style ('wp-jquery-ui-dialog');      
// admin_enqueue_script (  'my-modals-handle' ,'What bloody URL?' , array('jquery-ui-dialog')); // dependencies     
}
?>
<script>  
jQuery(document).ready(function(){ 
// jQuery('#dialog-form').hide();      //this works
var $info = jQuery("#dialog-form");   
// alert("$info = " + $info);           //this also works, shows we have the object, but the beneath does not.
//The rest is not working,...my div/dialog is visible immediately and not as a popup.(autoOpen is set to false....????)
 $info.dialog({ 
         'dialogClass'   : 'wp-dialog',
         'modal'         : true,
         'autoOpen'      : false,
         'closeOnEscape' : true,
         'buttons'       : {
         "Close": function() {
             jQuery(this).dialog('close');
         }
    }
 });
  $("#open-modal").click(function(event) {
     event.preventDefault();
     $info.dialog('open');
  }); 
}); 
</script>
<div id="dialog-form" title="Branch Editing" style="background-color:yellow;border:1px solid black;width:200px;height:200px;">
<p class="validateTips">All form fields are required.</p>
<form>
   <fieldset>
    <label for="BrName">Branch Name</label>
    <input type="text" name="txtBrname" id="txtBrName" class="text ui-widget-content ui-corner-all" />
    <label for="Tel">Tel</label>
    <input type="text" name="txtTel" id="txtTel" value="" class="text ui-widget-content ui-corner-all" />
   </fieldset>
</form>
</div>

<div id="dialog-form" title="Branch Editing">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
    <label for="BrName">Branch Name</label>
    <input type="text" name="txtBrname" id="txtBrName" class="text ui-widget-content ui-corner-all" />
    <label for="Tel">Tel</label>
    <input type="text" name="txtTel" id="txtTel" value="" class="text ui-widget-content ui-corner-all" />

</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<?php             
    echo "<table border='1' cellpadding='0' width='100%'>"; 
    echo "<tr> 
    <th>ID</th> 
    <th>Branch Name</th> 
    <th>Tel</th>
    <th>delete</th>
  </tr>"; 
global $wpdb;
$myrows = $wpdb->get_results("SELECT * FROM wp_sbbranches");
    // loop through results of database query, displaying them in the table      
foreach ($myrows as $row) {               
            echo "<tr>"; 
            echo '<td style="border:none;">' .$row->BrId. '</td>'; 
            echo '<td style="border:none;">' .$row->BrName. '</td>'; 
            echo '<td style="border:none;">' .$row->BrTel. '</td>';
     echo '<td style="border:none;"><button onclick="create-branch(' . $row->Id. ')"></td>';
            echo '<td style="border:none;"><button onclick="fn_DeleteBranch(' . $row->Id. ')"></td>'; 
            echo "</tr>";  
    }  
    // close table> 
    echo "</table>";
?> 
<button id="create-branch(' 0 ')" >Create new branch</button>
</div>