AJAX jQuery UI modal dialog

Edited to add the solution suggested by @alistair-laing.) After reading this post reply by @jek, I could make multiple links on my page that would pass an id variable through the URL so that the content of the dialog could be loaded in on the fly. However, I really want this to be a modal dialog: (edited to开发者_开发百科 include the fix; nb: the original script was in the post linked to above, all I did was break it)

$(function (){
  $('a.ajax').click(function() {
   var url = this.href;
   var dialog = $('<div style="display:none"></div>')
   .appendTo('body')
  // load remote content
   dialog.load(
     url, 
     {},
     function (responseText, textStatus, XMLHttpRequest) {
        dialog.dialog({ 
        modal: true,
        width: 500
      });
    }
   );
   //prevent the browser to follow the link
   return false;
 });
});

quiet a few things. Try move the content from your first .dialog into your second .dialog which you call as part of the the .load callback. What youare doing is creating dialog then injecting content into it only to call it again. You could also remove the the autoOpen so that the dialog opens with the content.