jQuery UIのダイアログボックス入らないセンター画面

StackOverflow https://stackoverflow.com/questions/1467102

質問

私はjQueryのダイアログボックスには、その中にチェックを入れます。しかし、そうで若干オフセンターを縦方向に配置します。

こちらのコード:

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

そのアイデアはなぜこんセンター?

役に立ちましたか？

解決

あなたのビューポートは、ダイアログが表示された後にスクロールされます場合は、

、それはもはや中心にされません。これは、意図せずにビューポートがページからコンテンツを削除/追加することでスクロールさせることが可能です。あなたが/スクロール時のダイアログウィンドウを更新したり、呼び出すことによって、イベントのサイズを変更することができます：

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

他のヒント

あなたのページにjquery.ui.position.jsを追加していますか？ 私は、同じ問題を抱えていたここのソースコードのをチェックし、私はしませんでした実現しましたそれはその後、私のページにJS追加...ダイアログが魔法の中心ます。

ここではなく、新しいGoogleサーチャーのための古い墓を掘ります。

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

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

1。）どんな要素でjQueryのダイアログセンターあなたはそれを入れています。

より多くの情報がなければ、私の推測では、マージンなどの何かと身体のdivを持っているということです。身体レベルにポップアップdiv要素を移動し、あなたが行ってもいいでしょう。

2。）あなたはそれをロードするよう、あなたが動的のdivにコンテンツを追加した場合、センタリングが正しいことはありません。あなたがそれに入れてデータyour'eを持つまでのdivを表示しません。

単に同じページにCSS線の下に追加します。

.ui-dialog 
{
position:fixed;
}

この問題を解決するには、私は私の体の高さを100％に設定したことを確認しました。

body { height:100% }

これは、ユーザがスクロールしながら中心位置を維持します。

あなたのダイアログの宣言にこれを追加

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

例：

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

私jquery.dimensions.jsの場合は犯人だった。

この問題は、多くの場合、アンカータグ（<a href='#' id='openButton'>Open</a>）を経由してダイアログを開き、ハンドラ例えば、デフォルトのブラウザの動作を妨げないに関連します。

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

これは通常、任意の位置/スクロールプラグインの必要がなくなります。

私は、ダイアログが中心に開いて、トップに自分のページをスクロールしませ持つのと同じ問題に直面していました。私は、ダイアログを開くために使用しているタグはアンカータグです。

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

シャープ記号は私のために問題を引き起こしていました。私はすべてがそうのようなアンカーのhrefを変更します：

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

今私のページには、幸せとダイアログを中心です。

のマイシナリオ：のダイアログがウィンドウに垂直センターを開いていませんでしたスクロールによりウィンドウに、ボタンのクリックでダイアログを開くには、ページを下にスクロールしなければならなかった私は、それは、ビューポートの外に行っていましたます。

としてのケンのあなたのモーダルコンテンツが文の下に実行した後に、上記しています。

$("selector").dialog('option', 'position', 'center');
コンテンツがプリインストールされている場合は、モーダルが開く前に

ただ、オープンイベントでこれを実行します 他のオープンイベントでDOMを操作して、文を実行します。

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

それは私のためによく働いたとの最もよい事は、それが機能するためにあなたが他のプラグインやライブラリが含まれていないということです。

ただ、問題は、私はwidget.jsのように、いくつかのjsファイルをインポートしていなかったということでした、同じ問題を解決しました：）

この中から、解のた私にとって私のコードを動的に発生させる二つのcontainting divs以内とする国連-キャッシュされたイメージです。私の溶液として

にご注意ください'load'コimg、'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'
                      , overflow: 'auto'
                  })
                  .appendTo(div);
var img = jQuery('<img>')
                  .attr({'src': url})
                  .appendTo(div2)
                  .load(function() {
                      div.dialog({
                          'modal': true
                          , 'width': 'auto'
                          , close: function() {
                               div.remove();
                          }
                      });
                  });
<!doctype html>：

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

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

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

これが今の画面、ページがにし、すべてのブラウザでスクロールされていない物質の上部にあるダイアログが開きます。

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

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

私はダイアログの高さに入ったときに固定された同じ問題を持っていました 

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

あなたは宣言を追加する必要があります。

ドキュメントの上部にます。

これがないと、jqueryのは、ページの下部にダイアログを置くために、それをドラッグしようとするとエラーが発生することがありがちます。

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

このソリューションではなく、唯一の理由は、新しいjQueryのバージョンを完全にこれを無視し、まさにこれであるデフォルトにフォールバックの動作しません。 あなただけのポップアップを中心にしたい場合は、あなたの選択肢から「センター」

：だから、あなただけの位置を削除することができます。
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top