ついでなので。
こちらもサンプルソースを見ると、
HTMLはただdialogってidでdiv作っておいて、
<div id="dialog" title="Basic dialog">
  <p>ここに中身</p>
</div>
JavaScript側はこんだけ。
$(function() {
  $( "#dialog" ).dialog();
});
そっけないなあ。
ドキュメントのoptionsとか見ても皆目見当が付かない。
ただやはりこれも同じHTMLのソース(テンプレ)の中にダイアログ用のソースをどんどん書いていくと、ごちゃごちゃになってくる。
1個、2個くらいならいいとは思うが。
ということで調べてみると、

Loading a page into a dialog

こういう記事があり、やり方はあることが分かった。

jqueryでまず一発 div を生成し、そこに .load() で別ファイルを読み込んで、そいつに dialog のオプションを設定し、そして .open() すれ、ってことらしい。

例として、id="add" のなにがしをクリックした場合として、
$('#add').click(function() {
  $('<div></div>')
    .load('add.php')
    .dialog({
      modal: true,
      autoOpen: false,
      buttons: {
        "登録": function() {
          $(this).dialog("close");
        }
      }
    })
    .dialog('open');
  return false;
});
こんな感じでしょうかー。