15

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

私の問題の写真

CSS：

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

6 に答える 6

15

このスレッド: Modal plugin of Bootstrap 2 is not displayed by the centerに正解があり、ここにも投稿されています。

   $('#YourModal').modal().css(
            {
                'margin-top': function () {
                    return window.pageYOffset-($(this).height() / 2 );
                }
            });
于 2013-02-06T22:10:33.037 に答える
4

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

ステファニーと私が共有する問題をもう一度言います。

私は長いブートストラップモーダルを持っています。小さな画面では、スクロールしないとモーダル全体を表示できません。デフォルトでは、ブートストラップ モーダルは position:fixed です。これを position:absolute に変更すると、スクロールできるようになります。

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

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

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 は逆に動作します。ここからのコメントを使用: Animate scrollTop not working in 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);
});

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

于 2013-10-09T15:11:17.450 に答える
2

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

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

于 2012-10-18T07:12:56.907 に答える
0

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

これは私にとってもうまくいきました（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);
});
于 2013-11-14T14:41:32.367 に答える