スクロールされたウィンドウでモーダル ダイアログを中央に配置しようとしています。このモーダルは画面内でドラッグ可能でなければならないため、絶対位置です。ドラッグ可能な機能にこのプラグインを使用します：
http://threedubmedia.com/code/event/drag
私の問題は、このモーダルを上に置くと絶対位置があることです: 50% 中央のウィンドウにモーダルを表示しますが、スクロールされたすべてのウィンドウを考慮していません。
質問する
32807 次
5 に答える
21
使用する必要があります
position:fixed
代わりに絶対/相対。
position:fixed 要素はブラウザ ウィンドウに対して相対的に配置されます。
これを使用すると、スクロールによる問題に直面することはありません。
http://www.w3schools.com/cssref/pr_class_position.asp
このトピックも表示できます。
于 2012-09-25T16:10:28.240 に答える
12
したがって、ダイアログの位置は絶対に設定されており、ドキュメント/本文の直接の子ですよね!?
プロンプト付きモーダルを絶対位置でセンタリング:
// Get the document offset :
var offset = $(document).scrollTop(),
// Get the window viewport height
viewportHeight = $(window).height(),
// cache your dialog element
$myDialog = $('#MY_DIALOG');
// now set your dialog position
$myDialog.css('top', (offset + (viewportHeight/2)) - ($myDialog.outerHeight()/2));
于 2012-09-25T16:34:02.610 に答える
1
スクロール可能なdiv内にある場合は、元のdivが次のようになっていることを確認して<div style="position:relative;">ください。
そうすれば、絶対的なdiv内部はその範囲内にとどまり、その親の相対divをの参照点として使用します。top:50%;
于 2012-09-25T16:08:10.743 に答える
1
一般に、スクロール バーを使用してビューポートの中心を見つけます。ウィンドウの高さを 2 で割り、上にスクロールします。結果は、ドキュメントの上部から何かをオフセットするピクセル数です。
配置された要素が複数のスクロール可能な要素の子である場合、それらを考慮する必要がありますが、基本的な計算は同じです。
補足として、使用しようとしているマークアップの例は、より正確な回答を得るのに役立ちます。
于 2012-09-25T16:16:34.830 に答える
0
位置オプションを削除してみてください
$dialog = $('<div><table width="100%" height="100%"><tr><td height="100%" align="center"><img style="vertical-align:middle" src="css/images/ajax-loader.gif"></td></tr></table></div>')
.html(msj)
.dialog({
title:"Validacion del ingreso.",
width:350,
height:200,
modal:true,
draggable:true,
buttons: {
"Aceptar": function()
{
$(this).dialog("close");
$(this).dialog("destroy");
}
}
});
于 2016-08-18T03:25:46.277 に答える