0

ダイアログをモーダルモードでページ中央に位置固定で表示したいのですが、うまく動かせません。回避策として、現在設定しています

position: "top"

したがって、少なくともビューポートの上部にくっついています。センター オプションを使用すると、単純に高さの 50% がトップ プロパティとして使用されます。私のページは約 7000px であるため、ビューポートからはみ出し、ユーザーはそれを見ることができません。

これを達成する方法について誰か良い提案がありますか? CSS オプションを試してみましたが、top プロパティが動的に設定されているため、CSS はまったく効果がありません。

また、オーバーレイの中央に配置しようとしましたが、モーダルが初期化されるまで ui-overlay 要素が存在しないため、中央に配置するためのアーチャーとして使用できません。

参考までに、Hallojs のリンク ウィジェットの配置バグの回避策としてこれを実行しようとしています。

4

1 に答える 1

0

ウィンドウの中央に配置できます。それを処理するjQueryメソッドを作成しました。ユーザーがモーダルを表示したままウィンドウをスクロールできるようにしたい場合を除き、固定位置にする必要がある理由がわかりませんか? jQuery センタリング拡張機能は次のとおりです。

(function($)
{
$.fn.centerMe = function(centerIn)
{
    var containerWidth = $(centerIn).width();
    var containerHeight = $(centerIn).height();
    var elWidth = $(this).width();
    var elHeight = $(this).height();
    $(this).css('left', containerWidth / 2 - elWidth / 2);
    var adjTop = containerHeight / 2 - elHeight / 2;
    $(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);

使用法は $('#myToBeCenteredElement').centerMe(window); です。中央に配置するのは通常、display:none; です。ページのどこかに。あなたはそれを見せて中央に置くなど。

中央に配置する要素には、絶対配置が必要です。

また、ウィンドウのスクロール イベントをキャッチし、それに応じて調整するために、これを別の 1 つにしました。

于 2014-01-13T20:00:44.487 に答える