私はモーダルダイアログをスクロールウィンドウの中央に置こうとしています。このモーダルは、スクリーン内でドラッグ可能でなければならないので絶対位置です。私はドラッグ可能な機能のために、このプラグインを使用します。私は、トップ置けばスクロールウインドウ内で位置絶対値を使用してセンターモーダルダイアログを表示する方法は？
http://threedubmedia.com/code/event/drag
私の問題は、このモーダルは絶対位置を有していることである：50％、それは中央のウィンドウでモーダルを表示するが、すべてのスクロールウィンドウを考慮していません。
スクロール可能なdivの内部にある場合、元のdivは<div style="position:relative;">であることを確認してください。
そうすれば、絶対で、内部にdivはあなたが
position:fixed
を使用する必要があり、それの範囲内に滞在し、top:50%;
ための基準点としてその親の相対div要素を使用します。代わりに絶対/相対。
位置：固定要素はブラウザウィンドウに対して配置されます。
これを使用してください。スクロールしても問題は発生しません。
http://www.w3schools.com/cssref/pr_class_position.asp
あなたも、このトピックを見ることができます：一般的に
を、スクロールバーとビューポートの中心を見つけること。ウィンドウの高さを2で割ってスクロールトップを取ります。結果は、何かがドキュメントのトップからオフセットされるべきピクセルの数である。
配置された要素が複数のスクロール可能な要素の子である場合、これらの要素を考慮する必要がありますが、基本的な計算は同じです。
あなたが使用しようとしているマークアップの例は、より正確な答えを得るのに役立ちます。
あなたのダイアログの位置は絶対に設定されていますので、ドキュメント/本文の直下の子です。絶対位置と促さモーダルセンタリング
：
// 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));
試みは
$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");
}
}
});
は、私は位置でテスト位置オプション削除：固定しますが、jqueryのドラッグ可能なプラグインが動作しません。 – paganotti
これは、親要素のCSSのためだと思います。いくつかのソースコードやフィディルドサンプルを提供できますか？ – gotqn
これはios safariではうまく機能しません。モーダルの背後にあるスクロール要素では、モーダルの意図された動作ではない「タップ可能」になります。 – greaterKing