jquery-ui - 第一次打开时出现 jQuery 对话框错误

Question

我有 jQuery 对话框弹出，将通过单击所选通知的链接来显示通知。数据从数据库加载到弹出窗口。所有这些都有效，但是当我在刷新通知页面后打开弹出窗口时出现了这个奇怪的错误。该错误发生在第一次打开弹出窗口时，位置全部错误并且“关闭”-按钮仍在使用应删除的对话框 UI css。第一次和第二次打开弹出窗口后一切正常，没有任何问题，按钮颜色和位置正确。

这是我使用的 jQuery 脚本：

$(function() {
  $( ".dialog" ).dialog({autoOpen: false}); 
  $(".load_data").on("click", function() {
    var url = this.href;  // get the url from the anchor
    var dialog = $(".dialog2").dialog({
      show: "fade",
      hide: "fade",
      width: "auto",
      height: "auto",
      title: "Notice",
      closeOnEscape: true,
      modal: true,
      position: "center",
      open: function() {
        $('button').removeClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover');
        //removes jquery css from button
        $('.ui-dialog-buttonpane').find('button:contains("Close")').addClass('button_cancel');
        //add css to close button
      },    
      buttons: {
        "Close": function() {
          $( this ).dialog( "close" );
        }
      },
    }); // get DOM element
    // load remote content
    dialog.load(
      url, // to the url from the anchor href attribute
      {},
      function(responseText, textStatus, XMLHttpRequest) {
        // success callback
        dialog.dialog();  // show the dialog                        
      }                         
    );                  

    return false; // prevent the default action on the anchor
  });
  $(".open_notice" ).click(function() {
    $( ".dialog" ).dialog( "open" );
    return false;       
  });
});