Jquery UI Dialog Center

I have a problem with centering a Jquery UI Dialog.

I'm bringing some images dynamically from FLICKR, when I click on my thumbnail, the image is positioned at the botton right of the page, if I close the dialog and click the thumbnail again, then the Dialog opens in the correct centered position.

Why doesn't it appear at the right (centered) position on the first click?

Here is my JS

I have used this as my starting point http://jqueryui.com/demos/dialog/#animated

$(function() {
    $( "#MYdialog" ).dialog({
         autoOpen: false,
        resizable: false,
        position: 'middle',
        draggable: false,
        width: 'auto',
        center: true,开发者_C百科 
        modal: true,
        show: "fade",
        hide: "fade",             
    });
});

Maybe this is happening because the image is not loaded when you open the dialog, try this:

var img = new Image()
img.src = "IMG_SRC"
$(img).load(function() {
  $("#content_img").html(img) //create a div with id="content_img" inside #MYdialog
  /*
    open dialog here
  */
});

Edit: forgot to use use load and call the dialog inside the callback

Try to fix your markup to remove the extra comma:

show: "fade",         hide: "fade", 

show: "fade",         hide: "fade"

Full example:

$(function() {
  $( "#MYdialog" ).dialog({
      autoOpen: false,
     resizable: false,
     position: 'middle',
     draggable: false,
     width: 'auto',
     center: true,
     modal: true,
     show: "fade",
     hide: "fade"
  });
}); 

I have encountered issues with the jQuery UI dialog as well, and worked around it the following way. Instead of declaring center: true (as it should work, but doesn't), I am using the following when I open the dialog:

$("#MYDialog").dialog("open")
    .dialog("moveToTop")
    .dialog('option', 'position', { my: 'center', at: 'center', of: "#wrapper" });

where #wrapper is an ID of a HTML element (for example a div) which is a frame around the screen you want to use to center the dialog (it can be invisible), e.g.

<div id="wrapper">
    <!-- your page content -->
</div>

Also, for other elements you can use jquery.ui.position.js to align them. More examples of the position plugin can be found here, or check out the API.