1

動的コンテンツを使用して、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");
    });
});

});

この最も単純な質問で申し訳ありませんが、ページ全体の中央にポップアップ ウィンドウを配置することはできません。問題は次のとおりです。

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

2 に答える 2

4

この問題は、コンテンツが読み込まれる前にダイアログが配置されているため、サイズが変化しているためです。最初にコンテンツが読み込まれるようにロジックを変更してから、ダイアログをインスタンス化します。

$('<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
    }
  })
});
于 2013-10-10T12:26:01.110 に答える
0

位置オプションにはこれで十分です。

position:'center'

それは動作しますか？

于 2013-10-10T12:25:07.587 に答える