jQuery - 動的コンテンツのダイアログの自動サイズ変更と中心位置の維持

Question

jQueryダイアログボックスがあり、Ajaxを使用してコンテンツをロードしています。

ダイアログは、最初はページの中央に表示されます。問題は、ここにあります。動的コンテンツなので、データのサイズは不明です。したがって、大きなデータが得られると、ダイアログは底辺だけに拡大します。すなわち、ダイアログは下に拡大し、上は同じ位置にあります。

私が欲しいのは、データがロードされると、コンテンツがスクロールせずに見えるように、ダイアログは、方向（上下）の両方で展開する必要があります

です。

Answer 1

デフォルトのダイアログは絶対的に相対的な位置にあります。

の自動高さがになるとダイアログが拡張されることがありますが、ページをスクロールすると、ダイアログの位置が変更されます。

これを行うための唯一の方法は、CSSスタイル

を使用して位置を固定

position : ['center',<distance from top>]

すると、ウィンドウ内のダイアログ

1. 位置にダイアログをこれらのスタイルを適用し、あります

   .fixed-dialog { position:"fixed" }

2. は

   dialogClass : 'fixed-dialog'

ので、ダイアログは私が探していた間、私は私を満足し、インターネット上で見つかった回答の

$('#dialog-div').dialog({ 
     position : ['center',10], 
     dialogClass: "fixed-dialog" 
    }); 

Answer 2

なしのようになりますダイアログにこのクラスを追加します。ソリューションで。この1つではありません。 JQuery APIのドキュメントについて詳しくは、I found something really interestingを読んでください。このWebページでは、ajaxリクエストが完了した後に実行されるイベントをバインドすることができます。これは単純なことではありません。私が独自のテストを行っていたときに、APIドキュメントにあるサンプルを使用して、私はそれを動作させることができませんでした。私のJQueryダイアログは、「将来の」文脈の仕方で存在しないようです。

現在のセレクタに一致するすべての要素のイベントハンドラをアタッチします。これを見つけるは、この1のような関数を作成するために私をリード：

$(document).live("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

出来上がり！それは魅力のように機能します！ ajaxリクエストが完了すると、positionプロパティが変更され、divの内容と次元に適合されます。

今後の人々に役立つことを願っています！

EDIT： ".live（）"の代わりに ".on（）"を使用すると便利です。私が答えを書いてから、バージョン1で削除された関数 ".live（）"のようです。9のjQueryを新しいものに置き換えました。 jQueryののユーザーのためのより適切な解決策> = 1.9は、このようなものになるだろう：

$(document).on("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

Answer 3

Use this 
    modal: true, 
    width: '80%', 
    autoResize:true, 
    resizable: true, 
    position: { 
     my: "center top", 
     at: "center top", 
     of: window 
    } 

順序と同じでなければなりません

Answer 4

私はその機能を使用します。

function centerDialog(id){ 

    var d = $('#'+id).closest('.ui-dialog'), 
     w = $(window); 

    d.css({ 

    'top':(w.height()-d.outerHeight())/2, 
    'left':(w.width()-d.outerWidth())/2 

    }); 

}