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