ブートストラップモーダルウィンドウを垂直方向に中央揃え


181

モーダルをビューポートの中央に配置したい(中央)私はいくつかのcssプロパティを追加しようとしました

 .modal { position: fixed; top:50%; left:50%; }   

私はこの例を使用していますhttp://jsfiddle.net/rniemeyer/Wjjnd/

私は試した

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

.modal.fade.in同様にオーバーライドしてみてください
haim770 2013

これで試してください:github.com/jschr/bootstrap-modal
John Magnolia

3
これを試してくださいzerosixthree.se/… 私は次を使用します:.modal.fade.in {top:50%; 変換:translateY(-50%); }
jowan sebastian 2014年

フレックスボックスソリューションが追加されました(translateY(-50%)モーダルコンテンツがデバイスの高さよりも高い場合、モーダルの上部にアクセスできなくなります)。
tao、

ブートストラップ4以降、これが不要になったmodal-dialog-centeredが追加されました。以下の回答を確認してください。
jcaruso

回答:


258

これは仕事をします: http //jsfiddle.net/sRmLV/1140/

ヘルパーdivといくつかのカスタムcssを使用します。JavaScriptやjQueryは必要ありません。

HTML(Bootstrapのdemo-codeに基づく)

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

このソリューションでは、高さのため:100%; と幅:100%; モーダルの外をクリックしてモーダルを閉じることはできません。この@Rens de Nobelの修正を思いつきますか?
pcatre 2014年

1
わかりました、このソリューションはうまく機能しているようです(ただし、モーダルをクリックしてモーダルを閉じることができない点を除きます)。しかし、どういうわけか、分度器を使用した私のe2eテストの一部が失敗します(そして、その理由を見つけることができません。これがバグであるとは思われません)。とにかく、私はjavascriptの答えに戻るので、これについてこれ以上の時間を失うことはありません。しかし、私が言ったように、これはうまく機能しているように見え、分度器でe2eテストを行う人々に注意するよう警告するだけです。
pcatre 2014年

3
@pcatre、ヒントをありがとう!これを修正してコードを更新しました。ポインターイベントの設定:なし; 整列クラスでトリックを行います。IE11、最新のChrome、Firefox、iOS Safariでテスト済み。
RNobel 2014年

4
これが機能しないというユーザーのコメントから更新されているかどうかはわかりませんが、モーダル要素の内部をクリックすると、現在のところ、上記のフィドルの例を使用すると100%機能します。あなたの助けと上記のすべてのコメントに感謝します。
Michael G

2
ブートストラップ4以降、これが不要になったmodal-dialog-centeredが追加されました。以下の回答を確認してください。
jcaruso

94

gpcolaの答えがうまくいかなかったので、少し編集して今はうまくいきます。変換ではなく「マージントップ」を使用しました。また、「shown」イベントの代わりに「show」を使用します。これは、配置後に非常に悪いジャンプが発生したためです(ブートストラップアニメーションをオンにすると表示されます)。配置する前にディスプレイを必ず「ブロック」に設定してください。そうしないと、$ dialog.height()が0になり、モーダルが完全に中央に配置されません。

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));

6
これは完璧です!だけではなく、4行目で$(文書).height()その$(ウィンドウ)を使用するのが正しい.height()のプラス私がする最後の行を変更します $('.modal:visible').each(centerModal);
デニスChmel

それは完全に私のために働きます、ありがとう。このコードを使用するときは、完全に中央揃えするために、modal-dialogの上部と下部のパディングを0pxに設定する必要もあります。
ミナmorsali 2014年

これは、モーダルがウィンドウの高さよりも高い場合に壊れます。ダイアログのマージントップを設定する直前に次の行を追加しました: if(offset < 0) offset = 0; ブロック全体を明確でない回答ケースに貼り付けています!
jetlej 2014年

以下の答えで、モーダルの上マージンを下マージンと等しくなるようにさらに変更を加えました
jetlej

完璧、$(this).css( 'display'、 'block');がありませんでした。いつも、高さが0だった理由を考えていました。
JānisGruzis 2014

81

これは私が自分のアプリのためにしたことです。bootstrap.cssファイル内の以下のクラスを見ると、.modal-dialogのデフォルトのパディングは10pxであり、@ media画面があり、(min-width:768px).modal-dialogのトップパディングは30pxに設定されています。したがって、カスタムcssファイルで、メディア画面の幅を指定せずに、すべての画面で上部パディングを15%に設定しました。お役に立てれば。

.modal-dialog {
  padding-top: 15%;
}

6
これは小さなアレットボックスでのみ機能し、ラージボックスでは機能しません
mina morsali 2014年

あなただけの小さなモーダルに適用することができます:.modal-dialog.modal-sm { padding-top:15%; }
Dunc

61

すべてのHTML5ブラウザーで見つけた最良の方法:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

2
私はこの解決策が好きで、とてもきれいでした。デスクトップまたは古いバージョンのSafariについては不明ですが、iOS 8では問題ないようです
Nicolas Galler '18

1
はい、@ NicolasGallerに同意します。それも私にとってはうまくいきます。ChromeとFirefoxでテストしました。それはうまくいきます。
Manjunath Reddy

2
これは、CSSのみのプログレッシブ拡張機能です。jsは不要で、フレックスボックスをサポートしていないブラウザは、デフォルトのブートストラップモーダル配置を取得します。
Craig Harshbarger、2016年

閉じるが、ページに複数のモーダルがある場合、モーダルを閉じることができなくなります。修正するには、以下の私の答えを参照してください。
Robert McKee

1
更新:への追加は機能align-items: center;してbody.modal-open .modalいるようです。
bernie 2016

20
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

//スタイル

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

3
これが普遍的な答えです。なぜ誰も投票しなかったのか分かりません。
Csaba Toth 2014

3
私は少なくとも4つのSOエントリを通過し、それぞれに数十の提案がありました。ところで、HTML5の時代には、少なくとも一部のフレームワークには機能が組み込まれているはずです。ジャグリングの代わりに。
Csaba Toth 2014

1
また、テーブルスタイルに対してwidth:100%と言うと、水平方向の中央揃えになります(モーダルがオーバーフロー非表示でない場合)。
Csaba Toth 2014

1
最善の答えです。これによりスクロールバーが作成されますが、.modal-open .modal {overflow-y:hidden;にすることでスクロールバーを無効にできます。}
クリストフ

14

カスタム宣言で設定された値を強制するために、topパラメーターが.modal.fade.inでオーバーライドされ、topの!important後にキーワードを追加します。これにより、ブラウザはその値を使用し、キーワードの他の値は無視されます。これには、他の場所では値を上書きできないという欠点があります。

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}

これにより、モーダルの背景をクリックしたときにモーダルを閉じることができなくなります。
スコットシンプソン

13

Bootstrap 4以降、JavaScriptなしでこれを実現するために次のクラスが追加されました。

modal-dialog-centered

あなたはここで彼らのドキュメントを見つけることができます。

モーダルを垂直方向に中央揃えするには、.modal-dialog-centeredと.modal-dialogの両方を追加する必要があることを指摘してくれたvdに感謝します。


1
これは、ブートストラップ4のための最高の答えです
broc.seib

modal-dialogとmodal-dialog-centeredの両方を追加すると、より良い結果が得られます
vd

1
@vd thatsは、ドキュメントが「.modal-dialog-centeredを.modal-dialogに追加して、モーダルを垂直方向に中央揃えにする」と言っていることを理解しています。回答を更新して、それを理解できなかった人にも反映させます。
jcaruso


11

あなたは使うことができます:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

垂直方向と水平方向の両方の中央に配置します。


2
これは、Flexを使用せずにCSSで真の「何かを中央に配置する方法」です。コンテキストがブートストラップまたはモーダルであることは関係ありません。他のすべての答えはやりすぎです。
ESR

1
この方法では、モーダルがデバイスの画面の高さよりも高い場合、モーダルの上部にアクセスできなくなります。
tao

11

ここでの答えのほとんどが機能しなかった、または部分的にしか機能しなかったため:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

[スタイル]セレクターを使用して、すべてのモーダルではなく、現在アクティブなモーダルにのみスタイルを適用する必要があります。 .in素晴らしかったのですが、移行が完了した後にのみ追加されるようです。これは遅すぎて、いくつかの本当に悪い移行を引き起こします。幸いにも、ブートストラップはモーダルにスタイル属性を適用しているように見えます。これは表示が始まったばかりなので、これは少しハックですが、機能します。

この:not([style='display: none;'])部分は、ブートストラップがスタイル属性を正しく削除せず、ダイアログを閉じるときにスタイルの表示をなしに設定するための回避策です。


よかった。ありがとう。それは実際に2016
。– AlexioVay

4年が経ちました。まだ便利です。どうも!
Hassan Nomani

8

あなたはそのようなBootstrap 3モーダルで垂直方向の整列中心を達成することができます:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

そして、このCSSクラスを「モーダルダイアログ」コンテナに追加します

<div class="modal-dialog modal-vertical-centered">
...

jsFiddleの動作例:http ://jsfiddle.net/U4NRx/


ダイアログを垂直に正確に中央揃えするにはどうすればよいですか?
gkalpak 2013年

ほとんどの場所でうまく機能しますが、Android 4.4より前のラップされたhtml5アプリケーションでは機能しません。
Josh

3
私のモーダルはこれでページの下にありました
ドリアン

1
うん!私は使用します:.modal.fade.in {top:50%; 変換:translateY(-50%); }
jowan sebastian 2014年

50%から15%に変更すると、ダイアログがウィンドウの中央に表示されます。.modal-vertical-centered {transform:translate(0、15%)!重要; -ms-transform:translate(0、15%)!重要; / * IE 9 / -webkit-transform:translate(0、15%)!重要; / SafariとChrome * /}
ハイメイ、2015年

8

これを行う最もクリーンで簡単な方法は、Flexboxを使用することです!次の例では、Bootstrap 3モーダルを画面の中央に垂直に配置します。これは、ここに掲載されている他のすべてのソリューションよりもはるかにクリーンでシンプルです。

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

注:これは最も簡単な解決策ですが、ブラウザのサポートにより、すべての人にとって機能するとは限りません。http//caniuse.com/#feat=flexbox

IEが(通常どおり)遅れているように見えます。私の場合、自分用またはクライアント用に開発した製品はすべてIE10 +です。(実際に製品を開発してMVPをより早く入手するために使用できる場合、古いバージョンのIEをサポートする開発時間を投資することはビジネス上賢明ではありません)。これは確かに誰もが持っている贅沢ではありません。

より大きなサイトがflexboxがサポートされているかどうかを検出し、クラスをページの本文に適用するのを見てきましたが、そのレベルのフロントエンドエンジニアリングは非常に堅牢であり、フォールバックが必要です。

私は人々にウェブの未来を受け入れるように勧めます。Flexboxはすばらしいので、できれば使用を開始してください。

PS-このサイトは、フレックスボックス全体を把握し、あらゆるユースケースに適用するのに本当に役立ちました:http ://flexboxfroggy.com/

編集:1つのページに2つのモーダルがある場合、これは.modal.inに適用されます。


これは他の点ではうまく機能しますが、終了アニメーションはよく見えません。
user2061057 2017年

CSS3トランジションでアニメーションを実行できるはずですか?
Greg Blass

7

利点:

  • デバイスより背が高くてもモーダルコンテンツにアクセス可能
  • 使用しないdisplay:table-cell(レイアウト用ではない)
  • デフォルトのBootstrap 3モーダルを変更する必要はありません markup
  • 配置は純粋なCSSです。上下にクリック/タップするとモーダルを閉じるためのJSが追加されます
  • 私は非接頭辞含まSCSS使う人のためのものgulpかをgrunt

:この回答は、Bootstrap 3の最新の仕様で最新の状態に保つつもりです。Bootstrap4ソリューションについては、この回答を参照してください(今のところ、ほぼ同じですが、やがて分岐する可能性があります)。バグや問題を見つけた場合はお知らせください。更新します。ありがとう。


クリーン、プレフィックスなしSCSSgulp/ で使用grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}

2
最高のソリューションIMO。
Radmation

3

さらに別のCSSソリューション。ビューポートよりも大きいポップアップでは機能しません。

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

.modal-dialogクラス(相対から)絶対位置をオーバーライドし、コンテンツを中心right:0, left: 0

.modal.fade .modal-dialog , .modal.in .modal-dialogの上に遷移アニメーションを設定するtop変換ではなく。

margin-top小さなポップアップの場合はポップアップを中心より少し下に移動し、長いポップアップの場合はモーダルがヘッダーでスタックします。したがってmargin-top:0, margin-bottom:0

さらに改良する必要があります。


3

angular-uiブートストラップを使用している人のために、上記の情報に基づいて以下のクラスを追加できます。

注:他の変更は必要なく、すべてのモーダルを解決します。

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

3

JavaScriptを使用する必要はありません。Boostrapモーダルは、表示されるときに.inクラスを追加します。このクラスの組み合わせをmodalclassName.fade.inとflex cssで変更するだけで完了です。

このCSSを追加して、モーダルを垂直方向と水平方向の中央に配置します。

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

2

私の選択、ほんの少しのCSS:(IE8では機能しません)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

最初のルールで遊んで、モーダルの表示方法を変更できます。

使用:Bootstrap 3.3.4


2

次のCSSを既存のCSSに追加するだけで、うまくいきます

.modal {
  text-align: center;
}
@media screen and (min-width: 768px) {
    .modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

2

Aranyの回答に基づいていますが、ページスクロールも考慮しています。

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

2

これはRens de Nobelのソリューションより少しクリーンな純粋なCSSソリューションだと思います。また、これはダイアログの外側をクリックしてダイアログを閉じることを妨げません。

http://plnkr.co/edit/JCGVZQ?p=preview

いくつかのCSSクラスを.modal-dialogクラスを使用してDIVコンテナーに追加するだけで、ブートストラップCSSよりも高い特異性が得られます(例:.centered)。

HTML

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

そして、この.modal-dialog.centeredコンテナーを固定し、適切に配置します。

CSS

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

または、フレックスボックスを使用するとさらに簡単です。

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

このフレックスボックスのバージョンは期待どおりに機能しません。最新のChrome(52.0.x)でテストすると、.modal-dialogは適切に中央に配置されますが、そのコンテンツの相互作用は古い場所で(奇妙に)フリーズしているようです。ただし、この手法を(.modalではなく).modal-dialogで直接使用することはできますが、他のいくつかのプロパティでは機能するようです。=)
giovannipds


1

これはBS3で機能し、v2ではテストされていません。モーダルを垂直方向に中央揃えにします。そこに遷移することに注意してください-位置に表示するだけの場合は、CSS transitionプロパティを編集します.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});

1
e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });

あなたの答えに関数「e」が何であるかを明確にしてもらえますか?
マイケルバトラー

1

これはAranyの答えを受け取り、モーダルが画面の高さよりも高い場合に機能します。

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

こんにちは@jetlejなぜAranyの回答を編集してこれを含めないのですか?あなたは彼のコードの大きなバグを解決します。
pcatre 2014年

@pcatre-編集を送信できることを知りませんでした!それを指摘してくれてありがとう
jetlej 2014年

1

ブートストラップmodal.jsに垂直モーダルセンタリングを追加するには、Modal.prototype.show関数の最後にこれを追加しました。

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

ページのサイズ変更やダイアログ内の要素が拡大/縮小するために、一度表示されたダイアログの高さが変わるとうまく機能しません。
Dirbaio 2015

0

モーダルを垂直に中央揃えに揃えるダイアログを作成します。

/* 注意:

1.selectorを割り当てる必要がない場合でも、ドキュメントからすべてのモーダルを見つけ、垂直方向に中央にします

2.真ん中の特定のモーダルが中央になるのを避けるには、クリックイベントでセレクターを使用しないでください

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

ミラノパンディアから


0

モーダルを中央揃えするこの単純なスクリプトを使用します。

必要に応じて、カスタムクラス(例:.modalではなく.modal.modal-vcenter)を設定して、機能を一部のモーダルのみに制限できます。

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

また、モーダルの水平方向の間隔にこのCSS修正を追加します。モーダルにスクロールを表示します。本体のスクロールはBootstrapによって自動的に非表示になります。

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}

0

この質問に対する別のCSS回答...
このソリューションは、モーダルの外側をクリックしてモーダルを閉じる機能を維持しながら、CSSを使用して目的の効果を達成します。また.modal-content、ポップアップがビューポートを超えないように、高さと幅の最大値を設定することもできます。コンテンツがモーダルサイズを超えると、スクロールが自動的に表示されます。

注:これが適切に機能するためには、
推奨さ.modal-dialog divれるブートストラップを省略する必要があります(何も壊さないようです)。Chrome 51およびIE 11でテスト済み

。CSSコード:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

EDIT:.modal-dialogこのクラスは、ユーザーがモーダル自体の外側をクリックしてモーダルを閉じることができますかどうかを選択することができます。ほとんどのモーダルには、明示的な「閉じる」または「キャンセル」ボタンがあります。この回避策を使用するときは、このことを覚えておいてください。


0

幅と高さでモーダルを集中化する最良のソリューションは、CSSで追加し、モーダルでこの 'centralize'をクラスとして追加します。

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

0

垂直方向に中央揃え 方向に中央揃えモーダルを垂直方向に中央揃えには、.modal-dialog-centeredを.modal-dialogに追加します

デモモーダルを起動

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.