7

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

ダイアログは最初はページの中央にあります。問題は、ここでは、動的なコンテンツであるため、データのサイズは不明です。したがって、大きなデータを取得すると、ダイアログは下側でのみ拡大します。つまり、ダイアログは下側で拡大し、上部は同じ位置にあります。

私が欲しいのは

データが読み込まれると、ダイアログは両方向（上と下）に展開され、スクロールせずにコンテンツが表示されるようになります。

4

6 に答える 6

14

私が解決策を見ている間、私がインターネットで見つけた答えのどれも私を満足させませんでした。これでもそうではありません。JQuery APIのドキュメントについてさらに詳しく読んだ後、私は本当に興味深いものを見つけました。このWebページで説明されているように、ajaxリクエストがジョブを実行した後に実行されるイベントをバインドできます。物事は、これほど単純ではありません。APIドキュメントで提供されている例を使用して独自のテストを行っていたため、動作させることができませんでした。私のJQueryダイアログは「将来の」コンテキストで存在していなかったようです。

これにより、このページに移動しました。説明は次 のとおりです。現在および将来の現在のセレクターに一致するすべての要素にイベントハンドラーをアタッチします。これを見つけると、次のような関数を作成できます。

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

そして出来上がり！それは魅力のように機能します！ajaxリクエストが実行されると、positionプロパティが変更され、divのコンテンツとそのディメンションに適合します。

それが将来の人々に役立つことを願っています！

編集：「。live（）」の代わりに関数「.on（）」を使用することをお勧めします。私が答えを書いた時から、jQueryのバージョン1.9で削除され、新しい関数に置き換えられた関数「.live（）」のようです。jQuery> = 1.9のユーザーにとってより適切なソリューションは、次のようになります。

$(document).on("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});
于 2013-07-24T21:38:22.330 に答える
2

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

ダイアログは自動高さを指定すると拡張する場合がありますが、ページをスクロールすると、ダイアログ自体が再配置されます。

これを行う唯一の方法は、これらのスタイルをダイアログに適用することです

  1. ダイアログをウィンドウに配置します。

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

  2. cssスタイルを使用して位置を修正します

    .fixed-dialog { position:"fixed" }

  3. このクラスをダイアログに追加します

    dialogClass : 'fixed-dialog'

したがって、ダイアログは次のようになります

$('#dialog-div').dialog({
        position : ['center',10],
        dialogClass: "fixed-dialog"
    });
于 2013-01-03T04:53:40.330 に答える
1 
 Use this
    modal: true,
    width: '80%',
    autoResize:true,
    resizable: true,
    position: {
        my: "center top", 
        at: "center top", 
        of: window
    }

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

于 2015-07-27T11:44:55.493 に答える
0

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

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

  });

}
于 2016-01-07T11:37:24.180 に答える
0

ダイアログコンテンツをajaxソースに移動する前は、ポジショニングは問題ありませんでした。その後、ポジショニングが問題になりました。以下は今日私のために働いた。

$('#formdialog').dialog({autoOpen: false, modal: true, title:'Dialog Title',  
    position: {
    my: "center top", 
    at: "center top+50", 
    of: window
}});

「+50」は「上から50px下」であり、「my」または「at」の行に追加するかどうかに関係なく機能することに注意してください。スペースは許可されていません。例：「センタートップ+50」は機能しません。

ドキュメントのオプションの位置で詳細を参照してください

于 2018-07-27T22:16:15.870 に答える
0

簡単な解決策を探していましたが、ダイアログを開く前にグラフの「描画」が完了していないことに気付いたので、.dialog（'open'）コマンドをsetTimeout関数で囲みました。

setTimeout(function () {
    $('#pie-Admin-Summary-dialog').dialog('open');
}, 500);

タイミングで遊べます。私は1/2秒を選びました。

于 2020-11-30T05:42:36.973 に答える