JQuery UI Диалог Центр

Question

У меня проблема с центрированием JQuery UI Dialog.

Я перенесу некоторые изображения динамически из FLICKR, когда я нажимаю на свою миниатюру, изображение располагается в нижней части страницы справа, еслиЯ закрываю диалоговое окно и снова щелкаю по миниатюре, после чего диалоговое окно открывается в правильном центрированном положении.

Почему оно не отображается в правильном (центрированном) положении при первом щелчке?

Вот мой JS

Я использовал это в качестве отправной точки http://jqueryui.com/demos/dialog/#animated

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

Answer 1

Возможно, это происходит из-за того, что изображение не загружается при открытии диалога, попробуйте следующее:

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
  */
});

Редактировать: забыл использовать use load и вызвать диалог внутри обратного вызова

Answer 2

Я также столкнулся с проблемами в диалоговом окне пользовательского интерфейса jQuery и обошел его следующим образом. Вместо объявления center: true (как должно работать, но не работает), я использую следующее при открытии диалога:

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

где #wrapper - это идентификатор элемента HTML (например, div), который представляет собой рамку вокруг экрана, которую вы хотите использовать для центрирования диалога (он может быть невидимым), например,

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

Также для других элементов вы можете использовать jquery.ui.position.js , чтобы выровнять их. Дополнительные примеры плагина позиции можно найти здесь или проверить API .

Answer 3

Попробуйте исправить разметку, чтобы убрать лишнюю запятую:

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

show: "fade",         hide: "fade"

Полный пример:

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