Question

我有一个以Jquery UI对话为中心的问题。

我正在动态地从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

尝试修复标记以删除额外的逗号：

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"
  });
});

Answer 3

我也遇到过jQuery UI对话框的问题，并通过以下方式解决了这个问题。而不是声明center: true（因为它应该工作，但没有），我在打开对话框时使用以下内容：

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

其中#wrapper是HTML元素的ID（例如div），它是屏幕周围要用于对话框居中的框架（它可以是不可见的），例如< / p>

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

此外，对于其他元素，您可以使用jquery.ui.position.js来对齐它们。可以找到位置插件的更多示例here，或查看API。

Jquery UI对话中心

3 个答案: