40

画面の中央に配置するためのjQueryダイアログボックスがあります。ただし、垂直方向にわずかに中心がずれているように見えます。

コードは次のとおりです。

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

これが中心にならない理由はありますか？

4

24 に答える 24

51

ダイアログが表示された後にビューポートがスクロールされると、中央に配置されなくなります。ページにコンテンツを追加/削除すると、意図せずにビューポートがスクロールする可能性があります。以下を呼び出して、スクロール/サイズ変更イベント中にダイアログ ウィンドウを中心に戻すことができます。

$('my-selector').dialog('option', 'position', 'center');
于 2009-09-24T00:17:15.333 に答える
34

jquery.ui.position.js をページに追加していますか? 私は同じ問題を抱えていて、ここでソースコードをチェックし、そのjsを自分のページに追加していないことに気付きました..ダイアログが魔法のように中央に配置されました.

于 2010-11-11T21:30:56.243 に答える
28

ここで古い墓を掘り起こしますが、新しい Google 検索者向けです。

このイベントをダイアログに追加すると、ユーザーがスクロールしたときにモデル ウィンドウの位置を維持できます。これにより、絶対配置から固定に変更されます。スクロール イベントを監視する必要はありません。

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}
于 2011-03-25T04:51:46.047 に答える
14

私は同じ問題を抱えていました。最終的にはjquery.dimensions.jsプラグインになりました。削除すると、すべて正常に機能しました。それを必要とする別のプラグインのために含めましたが、ここのリンクから、ディメンションがかなり前に jQuery コアに含まれていることがわかりました( http://api.jquery.com/category/dimensions )。ディメンション プラグインを削除するだけで問題ありません。

于 2011-04-15T15:10:31.867 に答える
11

1.) jQueryダイアログは、配置した要素に集中します。

これ以上の情報がなければ、私の推測では、ボディ div にマージンなどがあると思います。ポップアップ div を body レベルに移動すると、準備完了です。

2.) 読み込み時にコンテンツを動的に div に追加すると、センタリングが正しく行われません。データを入れるまで、div を表示しないでください。

于 2009-09-24T01:10:27.053 に答える
11

これをダイアログ宣言に追加します

my: "center",
at: "center",
of: window

例 ：

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
        position: {
            my: "center",
            at: "center",
            of: window
        }
})
于 2014-07-15T13:46:52.460 に答える
10

同じページの CSS 行の下に追加するだけです。

.ui-dialog 
{
position:fixed;
}
于 2012-10-06T19:43:28.363 に答える
9

この問題を解決するために、身長が 100% に設定されていることを確認しました。

body { height:100% }

これにより、ユーザーがスクロールしている間も中央の位置が維持されます。

于 2014-04-24T11:16:54.873 に答える
4

この問題は、多くの場合、アンカー タグ ( <a href='#' id='openButton'>Open</a>) を介してダイアログを開き、ハンドラーで既定のブラウザーの動作を妨げないことに関連しています。

$('#openButton').click(function(event) {
   event.preventDefault();
   //open dialog code...
});

これにより、通常、ポジショニング/スクロール プラグインが不要になります。

于 2013-12-30T20:31:40.230 に答える
3

私にとって jquery.dimensions.js が犯人でした

于 2011-02-09T21:05:59.177 に答える
2

ダイアログが中央に開かず、ページを一番上にスクロールするという同じ問題に直面していました。ダイアログを開くために使用しているタグは、アンカー タグです。

<a href="#">View More</a>

ポンド記号が問題を引き起こしていました。私がしたことは、アンカーの href を次のように変更することだけでした。

<a href="javascript:{}">View More</a>

今、私のページは幸せで、ダイアログを中央に配置しています。

于 2013-01-03T21:51:45.047 に答える
1

同じ問題を解決したばかりですが、問題は、widget.jsなどの一部のjsファイルをインポートしなかったことです:)

于 2011-06-02T11:42:21.753 に答える
1

私のコードは2つの含まれるdivを動的に生成し、その中にキャッシュされていない画像があるため、上記の解決策はどれもうまくいかないようでした。私の解決策は次のとおりです。

img の「load」呼び出しと、ダイアログ呼び出しの「close」パラメーターに注意してください。

var div = jQuery('<div></div>')
                  .attr({id: 'プレビュー画像'})
                  .appendTo('本体')
                  。隠れる（）;
var div2 = jQuery('<div></div>')
                  .css({
                      maxWidth: parseInt(jQuery(window).width() *.80) + 'px'
                      、maxHeight: parseInt(jQuery(window).height() *.80) + 'px'
                      、オーバーフロー:「自動」
                  }))
                  .appendTo(div);
var img = jQuery('<img>')
                  .attr({'src': URL})
                  .appendTo(div2)
                  .load(関数() {
                      div.dialog({
                          「モーダル」: true
                          、「幅」：「自動」
                          、閉じる: 関数() {
                               div.remove();
                          }
                      });
                  });
于 2013-02-26T10:06:02.270 に答える
0

ダイアログの高さを入力したときに修正された同じ問題がありました。

$("#dialog").dialog({
    height: 500,
    width: 800
});
于 2014-11-24T10:12:25.317 に答える
0

ダイアログを画面の中央に配置するには:

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});
于 2014-10-28T08:32:24.990 に答える
0

宣言を追加する必要があります

ドキュメントの上部。

これがないと、jquery はダイアログをページの下部に配置する傾向があり、ドラッグしようとするとエラーが発生する可能性があります。

于 2014-12-15T13:16:35.263 に答える
0

これが私が問題を解決した方法です。ダイアログのこの開く機能を追加しました：

  open: function () {
                $('.ui-dialog').css("top","0px");                                
                    }

これにより、ページがどこにスクロールされても、すべてのブラウザーでダイアログが画面の上部に表示されるようになりました。

于 2012-06-11T15:22:14.637 に答える