web-dev-qa-db-ja.com

表示された画面の中央にモーダルレイヤーを設定します

私は Twitter Bootstrapのモーダル を使用していますが、画面が小さいためにスクロールできるようにする必要があるため、位置を絶対に変更する必要がありました。悲しいことに、これにより、モーダルは表示領域ではなく、サイトの固定位置に開きます。私が現在見ている画面にそれらを開く（そしてスクロールできる）方法はありますか？

Picture of my problem

CSS：

.modal {
    width: 845px;
    margin: -250px 0 0 -430px;
    background-color: #f6f5ed;
    position: absolute;
    border: 1px solid #cdc4b2;
    top: 50%;
    left: 50%;
}
twitter-bootstrapmodal-dialogcentering
14
Stefanie

このスレッド： Bootstrap 2のモーダルプラグインは中央に表示されません 正解があり、ここにも投稿されています：

   $('#YourModal').modal().css(
            {
                'margin-top': function () {
                    return window.pageYOffset-($(this).height() / 2 );
                }
            });
14
steve

私の問題は@Stephanieと同じですが、@ steveの解決策はうまくいきませんでした。

ステファニーと私が共有する問題を言い換えると：

長いbootstrapモーダルがあります。小さな画面では、スクロールしないとモーダル全体を表示できません。デフォルトでは、bootstrapモーダルはposition：fixedです。できます。これをposition：absoluteに変更して、スクロールできるようにします。

しかし今、私は新しい問題を抱えています。私のページも長いので、ページのbottomからモーダルを起動すると、モーダルがに表示されます。 ）ページのtop、現在のブラウザビューの外。

したがって、これらの両方を修正するには：

css：

// allows the modal to be scrolled
.modal {position: absolute;}

javascript/jQuery：

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  $('body').scrollTop(0);
});

しかし、FirefoxはscrollTopのセレクターとしての「body」は好きではありませんが、「html」は好きです。 Webkitは逆に動作します。ここからのコメントの使用： Firefoxでスクロールトップが機能しないアニメーション

私はjQuery <1.9を使用しているので、これを解決するためにブラウザースニッフィングを行うことができます。

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  // Firefox wants 'html', others want 'body'
  $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});

モーダルが起動されると、ページの上部に表示され、ブラウザウィンドウが上にスクロールして表示されますが、画面が小さすぎてモーダルの全長を表示できない場合でも、ユーザーは下にスクロールできます。

4
AllInOne

ゲームに少し遅れていますが、これは私が現在実施している修正であり、Firefox、ChromeおよびIEで機能します。

$('body').on('show', '.modal', function () {
$(this).css({ 'margin-top': window.pageYOffset - $(this).height() / 2, 'top': '50%' });
$(this).css({ 'margin-left': window.pageXOffset - $(this).width() / 2, 'left': '50%' });
});
1
Damian

「絶対」ではなく「固定」の位置を使用してください。

詳細はこちら http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

1
tomaszbak

モバイルでスクロールできるように、絶対位置にも変更する必要がありました。

これは私にも役立ちました（AllInOneによるソリューション）：

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  // Firefox wants 'html', others want 'body'
  $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});
0
user2959136

問題はCSSです-「body」タグと「HTML」タグが「height：100％」に設定されています

0
Aro Hostmaster