web-dev-qa-db-ja.com

jQuery UIダイアログボックスが中央画面に配置されていません

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

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

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

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

jqueryjquery-uidialogposition
38
David

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

$('my-selector').dialog('option', 'position', 'center');
50
Ken Browning

Jquery.ui.position.jsをページに追加していますか？私は同じ問題を抱えていて、ソースコードをチェックしました here そして、そのjsをページに追加しなかったことに気付きました。

34
Eugenio Miró

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

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

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}
29
jfraser

私は同じ問題を抱えていました。最終的にはjquery.dimensions.jsプラグインになりました。私はそれを削除した場合、すべてが正常に動作しました。私はそれを必要とした別のプラグインのためにそれを含めましたが、リンクから ここ かなり前にディメンションがjQueryコアに含まれていたことがわかりました（ http：//api.jquery .com/category/dimensions ）。寸法プラグインを取り除くだけで大丈夫です。

14
coryvb123

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

.ui-dialog 
{
position:fixed;
}
10
Rajkishor Sahu

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

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

2.）divのロード時にコンテンツをdivに動的に追加する場合、センタリングは正しくありません。配置するデータを取得するまで、divを表示しないでください。

10
Stefan Kendall

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

body { height:100% }

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

6
user781058

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

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

例：

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})
6
Taksh

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

3
Eswar

この問題は、アンカータグ（<a href='#' id='openButton'>Open</a>）およびハンドラーのデフォルトのブラウザー動作を妨げない.

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

これにより、通常、位置決め/スクロールプラグインが不要になります。

3
Rob Willis

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

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

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

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

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

2
Jimbo

私のシナリオ：ボタンクリックでダイアログを開くにはページを下にスクロールする必要がありました。ウィンドウスクロールがダイアログをウィンドウの中央に垂直に開かず、ビューポートから出ていました。

Kenが上記で言及したように、モーダルコンテンツを実行した後、ステートメントを実行します。

$("selector").dialog('option', 'position', 'center');

モーダルが開く前にコンテンツがプリロードされている場合は、openイベントでこれを実行するだけです。そうでない場合は、openイベントでDOMを操作してからステートメントを実行します。

$( ".selector" ).dialog({
open: function( event, ui ) {
//Do DOM manipulation if needed before executing below statement
$(this).dialog('option', 'position', 'center');
}
});

私にとってはうまくいきましたが、一番いいのは、他のプラグインやライブラリを含めないことです。

2
Sanjeev

これをHTMLファイルの先頭に追加する必要がありました：<!doctype html>。 positionプロパティを設定する必要はありませんでした。これはjQuery 3.2.1でのことです。 1.7.1では、これは必要ありませんでした。

1
user2233706

私のコードは2つのdivを動的に生成し、その中にキャッシュされていないイメージを生成しているため、上記のソリューションはどれもうまくいかないようです。私の解決策は次のとおりでした：

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

 var div = jQuery（ '<div> </ div>'）
 .attr（{id： 'previewImage'}）
 .appendTo（ 'body'）
 .hide（）; 
 var div2 = jQuery（ '<div> </ div>'）
 .css（{
 maxWidth：parseInt（jQuery（window） .width（）* .80）+ 'px' 
、maxHeight：parseInt（jQuery（window）.height（）* .80）+ 'px' 
、オーバーフロー： 'auto' 
}）
 .appendTo（div）; 
 var img = jQuery（ '<img>'）
 .attr（{'src'：url}）
 .appendTo（div2）
 .load（function（）{
 div.dialog（{
 'modal'：true 
、 'width' ： 'auto' 
、close：function（）{
 div.remove（）; 
} 
 }）; 
}）;
1
shmuel613

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

1
vach

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

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});
0
Omar Ben Salah

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

ドキュメントの上部。

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

0
thedrs

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

$("#dialog").dialog({
    height: 500,
    width: 800
});
0
Carl

これは私が問題を解決した方法です、ダイアログのこのオープン関数を追加しました：

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

これにより、ページがすべてのブラウザにスクロールされる場所に関係なく、画面の上部にダイアログが開きます。

0
Nick Benedict
$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

このソリューションは機能しますが、新しいjQueryバージョンがこれを完全に無視し、デフォルト（正確にはこれ）に戻ったためです。したがって、ポップアップを中央に配置したい場合は、オプションから位置を削除することができます： 'center'。

0
Tassilo Singhammer