Question

我有jQuery popUp对话框的初始化，包含动态内容：

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

}）;

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

                  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'

有效吗？

具有自动宽度和自动高度的中心jQuery popUp对话框

2 个答案: