jQuery UIによるダイアログ｜Eight-Smile

$(function(){
  //テーマのロード
  $.uiThemeLoader.load();

  //シンプルなダイアログ
  $(".btn1").click(function(){
  $(".dialog1").dialog();
  });

  //モーダルダイアログ
  $(".btn2").click(function(){
    $(".dialog2").dialog({ modal: true });
  });

  //ボタンつきダイアログ
  $(".btn3").click(function(){
    $(".dialog3").dialog({
      buttons: {
        btn3: function(){
          alert("btn3を押しました");
        },
        btn2: function(){
          alert("btn2を押しました");
        },
        btn1: function(){
          alert("btn1を押しました");
        }
      }
    });
  });
});

以下のソースはなくてもjquery-ui.cssを読み込めばできるらしいのですが、できなかったので参考サイトで使われていたのを載せておきます

(function($){
  jQuery.uiThemeLoader = {
    defaultTheme: "ui-lightness",
    defaultVersion: "1.8.1",
    currentTheme: null,
    $link: $("").attr("rel", "stylesheet").appendTo("head"),
    themes: {
       "ui-lightness": "UI lightness",
       "ui-darkness": "UI darkness",
       "smoothness": "Smoothness",
       "start": "Start",
       "redmond": "Redmond",
       "sunny": "Sunny",
       "overcast": "Overcast",
       "le-frog": "Le Frog",
       "flick": "Flick",
       "pepper-grinder": "Pepper Grinder",
       "eggplant": "Eggplant",
       "dark-hive": "Dark Hive",
       "cupertino": "Cupertino",
       "south-street": "South Street",
       "blitzer": "Blitzer",
       "humanity": "Humanity",
       "hot-sneaks": "Hot sneaks",
       "excite-bike": "Excite Bike",
       "vader": "Vader",
       "dot-luv": "Dot Luv",
       "mint-choc": "Mint Choc",
       "black-tie": "Black Tie",
       "trontastic": "Trontastic",
       "swanky-purse": "Swanky Purse"
   },

   load: function(theme, version){
        theme = theme || this.defaultTheme;
        version = version || this.defaultVersion;
        if (!this.themes[theme]) {
            throw Error("theme " + theme + " is not suporrt");
        }
this.$link.attr("href","http://ajax.googleapis.com/ajax/libs/jqueryui/"+version+"/themes/"+theme+"/jquery-ui.css");
        this.currentTheme = theme;
        return this;
    }
};
})(jQuery);

.dialog { display: none; }