使用自动宽度和自动高度居中 jQuery 弹出对话框

Question

我有以下 jQuery 弹出对话框的初始化，带有动态内容：

  jQuery("#popUp").live("click", function (e) {
   e.preventDefault();
    jQuery("<div></div>")
        .addClass("dialog")
        .attr("id", "popUpDialog")
        .appendTo("body")
        .dialog({
            title: jQuery(this).attr("data-dialog-title"),
            close: function() { jQuery(this).remove(); },
            modal: true,
            hide: { effect: "none", duration: 150 },
            show: { effect: "none", duration: 150 },
            width: 'auto',
            height: 'auto',
            position: {
                my: 'center',
                at: 'center',
            of: jQuery(window)
            }
        }).load(this.href);

    jQuery(".close").live("click", function (e) {
        e.preventDefault();
        jQuery(this).closest(".dialog").dialog("close");
    });
});

});

对于这个最简单的问题，我很抱歉，但我不能将弹出窗口放在整个页面的中心。问题出在：

                  position: {
                  my: 'center',
                  at: 'center',
              of: jQuery(window)}

Answer 1

问题是因为对话框在其内容加载之前被定位，因此它的大小正在改变。更改您的逻辑，以便首先加载内容，然后实例化对话框：

$('<div />', {
  class: 'dialog',
  id: 'popUpDialog' 
}).appendTo('body').load(this.href, function() {
  // set up the dialog in the callback of the AJAX request...
  $(this).dialog({
    title: jQuery(this).attr("data-dialog-title"),
    close: function() { jQuery(this).remove(); },
    modal: true,
    hide: { effect: "none", duration: 150 },
    show: { effect: "none", duration: 150 },
    width: 'auto',
    height: 'auto',
    position: {
      my: 'center',
      at: 'center',
      of: window
    }
  })
});

Answer 2

这对于位置选项应该足够了：

position:'center'

有效吗？