web-dev-qa-db-ja.com

bootstrap 3モーダルのヘッダー位置を修正

Bootstrap modalで固定ヘッダーを使用したいが、。modal-header as position：fixedに沿ってスクロールすると、モーダコンテンツを使用して、BSモーダルで完全に固定されたヘッダーを作成するにはどうすればよいですか。

csstwitter-bootstrapmodal-dialog
25
Lucas Zardo

ヘッダーを修正するのではなく、本体の高さを修正してスクロール可能にします。これにより、ヘッダー（およびフッター）が常に表示されます。

CSS3 vh unit と calc を使用して簡単にこれを行うことができます。両方の vh as calc は、ブラウザのサポートがかなり良好です（IE9 +）。

Vh単位は、ビューポート（=ブラウザーウィンドウ）の高さを基準にしています。 _1 vh_は高さの1％で、_100vh_はビューポートの高さの100％を意味します。

モーダルのヘッダー、フッター、マージンの高さを差し引くだけです。そんなにダイナミックになるのは難しいでしょう。これらのサイズが固定されている場合は、すべての高さを追加します。

heightまたは_max-height_をcalc(100vh - header+footer px)に設定します。

_.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
_

jsfiddleを参照

77
Jasny - Arnold Daniels

これは簡単なトリックです。クラス「fixedHeader」でdivを修正する必要があると仮定します

Simple Jquery Way：

$('.modal').scroll(function() {
     var a=$('.modal').scrollTop();
     $('.fixedHeader').css('top',a+'px');
});

[〜＃〜] css [〜＃〜]

.fixedHeader {
    position:fixed;
}

上記で私が答えたものはすべて、通常のbootstrap jqueryを使用しています。しかし、誰かがangular bootstrap=

角度

$timeout(function() {
    angular.element('.modal').scroll(function() {
        var a = angular.element('.modal').scrollTop();
        angular.element('.fixedHeader').css('top', a + 'px');
    });
}, 10);
/*Put the above in modalinstance controller*/
/*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class '.modal' */

[〜＃〜] css [〜＃〜]

.fixedHeader {
    position:fixed;
}

どちらの場合もjquery依存関係がインストールされていることを確認してください。

7
ritz078

私の解決策は少しばかげているように思えるかもしれませんが、ユースケースでこの問題を解決するために行った手順を詳しく説明しています。

Ritz078の answer のようなものを試しましたが、Safariが独自の方法で行うのが好きなので、スクロールするとiOSでうまく動作しないことがわかりました。

したがって、私の解決策は、貼り付けたいコードの一部を複製し、その複製コードをモーダルの外側に独自の隠しラッパーで配置することでした：

<div class="fixed-header">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
    </div>
</div>

次に、JSを使用して、1）モーダルを少しスクロールした後に複製コードを表示し、2）モーダルからクリックするたびに複製コードを閉じ、3）複製モーダルの閉じるボタンに機能を復元します。

$('#myModal').on('scroll', function() {
    var threshold = 60;

    if ($('#myModal').scrollTop() > threshold) {
        $('.fixed-header').addClass('affixed');
    }
    else {
        $('.fixed-header').removeClass('affixed');
    }
});

$('#myModal').on('hide.bs.modal', function (e) {
    $('.fixed-header').removeClass('affixed');
});

$('.fixed-header button').click(function() {
    $('#myModal').modal('hide');
});

ここでの課題は、モーダルのスタイル（特にその幅とマージン）を一致させることですが、このソリューションでは、ファンキーに見えることなくiOSでモーダルを自由にスクロールできます。これが私の目標でした。

JSFiddle （ Jasnyの答え から分岐して、彼の答えとスコープがどのように異なるかを示しています）

4
Brendan

私のコメントによると、これは実際にはBootstrap 3.の改善でした。3。

このようなものでそれをオーバーライドすることができますが、それは素晴らしい機能ではありません。

.modal {
  overflow: hidden;
}

.modal-body {
  height: 300px;
  overflow: auto;
}

デモ

3
davidpauljunior

Javascriptでクラスをモーダルに追加します。

windowClass: 'framework-modal'

Cssでは、o modal-bodyを調整します。

.framework-modal .modal-body {
    max-height: 600px;
    overflow: auto;
}
1
Edmilson Lani