第一次打开时出现jQuery Dialog错误

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