jQueryダイアログは常に中央に配置されます

Question

どのように実装すれば、自動幅が&のjQueryモーダルダイアログボックスが常にブラウザの中央に配置されます。また、ブラウザのウィンドウのサイズを変更した後。

次のコードは機能しません。私は問題が自動幅&の高さだと思う。

jQueryの - コード

$("<div class='popupDialog'>Loading...</div>").dialog({ 
    autoOpen: true, 
    closeOnEscape: true, 
    height: 'auto', 
    modal: true, 
    title: 'About Ricky', 
    width: 'auto' 
}).bind('dialogclose', function() { 
    jdialog.dialog('destroy'); 
}).load(url, function() { 
    $(this).dialog("option", "position", ['center', 'center']); 
}); 

$(window).resize(function() { 
    $(".ui-dialog-content").dialog("option", "position", ['center', 'center']); 
}); 

ありがとうございました！これが動作しない

margin-left:auto;margin-right:auto; 

：

Answer 1

は、ダイアログボックスの周りのモーダルウィンドウあなたがCSSで中央にダイアログボックスを配置できるようにする必要がありますか？私たちが見ることができる「サンプル」ページがありますか？

Answer 2

$(window).resize(function() { 
    $("#dialog").dialog("option", "position", "center"); 
}); 

ワーキングjsFiddle：http://jsfiddle.net/vNB8M/

ダイアログが自動幅&高さを中心にして、ウィンドウのサイズ変更後にセンタリングされ続けています。

Answer 3

具体的には、作成時にビューポートのサイズに基づいてダイアログボックスにexplict top:とleft: CSSプロパティを割り当てるので、position: ["center", "center"]は最善の解決策ではないと思います。

ダイアログセンターを画面に垂直に表示しようとすると、同じ問題が発生しました。ここに私の解決策があります：

私の.dialog()機能のoptionsの部分では、私はposition:[null, 32]を渡します。 nullは、要素のスタイルをleft:の値に設定し、ダイアログボックスをウィンドウの最上部に固定したままにします。32は、また、明示的な幅を設定してください。うまくいけば、これは誰かに役立ちます

$('div#popup').dialog({ 
    autoOpen: false, 
    height: 710, 
    modal: true, 
    position: [null, 32], 
    dialogClass: "myClass", 
    resizable: false, 
    show: 'fade', 
    width: 1080 
    }); 

：

私はまた、単にmargin:0 auto; CSSプロパティでカスタムクラスを割り当てるdialogClassオプション、使用：

.myClass{ 
    margin:0 auto; 
} 

をそして、私のダイアログは次のようになります。

Answer 4

私の望む答えはありませんでした。それでも問題を抱えている人には、私のために働いたのがここにあります。これにより、ダイアログが常に画面の中央に表示され、ブラウザのサイズが変更されるとダイアログが中央に表示されます。

$(window).resize(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
}); 

パフォーマンスが非常に悪いですが、リサイズ終了を待つことができます：

$("#ShowDialogButton").click(function(){ 
    $("#MyDialog").dialog({ 
     show: 'fade' 
    }).dialog("option", "position", { my: "center", at: "center", of: window }); 

    $(window).resize(function() { 
     $("#MyDialog").dialog("option", "position", { my: "center", at: "center", of: window }); 
    }); 

}); 

Answer 5

このソリューションでは、働いているjQuery - how to wait for the 'end' of 'resize' event and only then perform an action?。

は私もこれを試してみましたが、私は、ダイアログ開かれた要素の位置よりも低いか高いスクロールすることはできません： `window`に` resize`イベント

$(window).scroll(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
});