jQuery Dialog Open (more than once)?

I found some jQuery code online for the jQuery Dialog and it works great. The problem I am having is when I click on the linked image to open dialog it opens like it should but if I close the dialog and click the linked image again it will not reopen the jQuery Dialog.

Here is the jQuery code:

$(document).ready(function(){
       $('#gravatarprofilemoreinfoshow').click(function(){
           $('#gravatarprofilemoreinfo').dialog({
               modal:true,
               resizable: false,
               draggable: true,
               width: '486px',
               height: 'auto',
               hide: 'size',
               autoOpen: true,
               buttons:{ "Close": function() { $(this).dialog("close"); } },
               close: function(ev, ui) { $(this).remove(); }
           });
       });
   });

The HTML markup is:

<a href="#" id="gravatarprofilemoreinfoshow" rel="/somelink" >
<img class="profileimgright profileimgframe" alt="Profile Image" src="/url/to/image" />
</a>

How can I adjust the code? Also is there a way to alter the code so it does not depend on unique id's?

Reason I ask is I would like to use the jQuery code above across my site to show different information but the code above requires a unique name (sorry 开发者_JAVA百科not sure what they call it in jQuery) and want the code to be reusable across my website.

You should delete the line

close: function(ev, ui) { $(this).remove(); }

problem is that it removes the dialog and contents after close, so you are not able to use it on second click. Take a look at jQuery Remove

Also, to reuse use this code, you could do following. Declare the method that Registers Dialog On Click. This method would be passed selectors of the image and dialog

function registerDialogOnImageClick($image, $dialog){
      $image.click(function(){
           $dialog.dialog({
               modal:true,
               resizable: false,
               draggable: true,
               width: '486px',
               height: 'auto',
               hide: 'size',
               autoOpen: true,
               buttons:{ "Close": function() { $(this).dialog("close"); } },
           });
       });
   }

this code could be called from anywhere, passing selectors of image and dialog

$(document).ready(function(){
   registerDialogOnImageClick($('#gravatarprofilemoreinfoshow'), $('#gravatarprofilemoreinfo');
});