javascript - Bootstrapモーダルウィンドウを垂直方向に中央揃え

Question

モーダルをビューポート (中央) の中央に配置したいのですが、いくつかの 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);
        }
    })

Answer 1

これは仕事をします: 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;
}

Answer 2

gpcolaの答えがうまくいかなかったので、少し編集して今はうまくいきます。変換の代わりに「マージントップ」を使用しました。また、「表示」イベントの代わりに「表示」イベントを使用します。これは、配置のジャンプが非常に悪いためです (ブートストラップ アニメーションがオンの場合に表示されます)。配置する前に必ずディスプレイを「ブロック」に設定してください。そうしないと、$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));

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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;
}

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

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

Answer 6

あなたが使用することができます:

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

垂直方向と水平方向の両方で中央揃えにします。

Answer 7

そのような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クラスを「modal-dialog」コンテナに追加します

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

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

Answer 8

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

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

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

（いつものように）IEが遅れているようです。私の場合、自分用またはクライアント用に開発するすべての製品は IE10+ です。(実際に製品を開発し、MVP をより迅速にリリースするために使用できるのに、古いバージョンの IE をサポートするために開発時間を投資することは、ビジネス上は意味がありません)。これは確かに誰もが持っている贅沢ではありません。

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

Web の未来を受け入れることを人々に勧めたいと思います。Flexbox は素晴らしいので、可能であれば使い始めるべきです。

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

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

Answer 9

利点:

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

// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

.modal-dialog {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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>

注: Bootstrap 3 の最新の仕様でこの回答を最新の状態に保つつもりです。Bootstrap 4 ソリューションについては、この回答を参照してください(現時点ではほぼ同じですが、時間が経つにつれて異なる可能性があります)。バグや問題が見つかった場合は、お知らせください。更新します。ありがとう。

---

クリーン、接頭辞なしSCSS( gulp/で使用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);
  }
}

Answer 10

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;
}

Answer 11

さらに別の 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

さらに洗練させる必要があります。

Answer 12

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

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

.modal-dialog クラスを使用して DIV コンテナーに CSS クラスを追加するだけで、ブートストラップ 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;
}

Answer 13

次の 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;
}

Answer 14

.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 15

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)
    });

Answer 16

これは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);
});

Answer 17

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

必要に応じて、カスタム クラス (例: .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;
}

Answer 18

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

注:
これが適切に機能するためには、 推奨される Bootstrap を.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%);
}

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

Answer 19

モーダルを真に中央に配置するには、すべてダイアログを配置します。

/* ノート：

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

2.特定のモーダルが中央になるのを避けるために、クリックイベントで :not セレクターを使用できます

*/

 $( "[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);
  });

ミラノ・パンディア出身

Answer 20

4時間後、解決策を見つけました。さまざまな解像度 (デスクトップ、タブレット、スマートフォン) でモーダルを中央に配置するには:

index.php

<! - Bootstrap core CSS ->
     <link href=".../css/bootstrap-modal-bs3patch.css" rel="stylesheet">
     <link href=".../css/bootstrap-modal.css" rel="stylesheet">

https://github.com/jschr/bootstrap-modalからダウンロードしたファイルbootstrap-modal-bs3patch.css

次に、このファイルを変更しました。次のようにCSSします。

body.modal-open,
. modal-open. navbar-fixed-top,
. modal-open. navbar-fixed-bottom {
   margin-right: 0;
}


. {modal
   padding: 0;
}

. modal.container {
   max-width: none;
}

@ media (min-width: 768px) and (max-width: 992px) {

. {modal-dialog
background-color: black;
position: fixed;
top: 20%! important;
left: 15%! important;
}
}

@ media (min-width: 992px) and (max-width: 1300px) {

. {modal-dialog
background-color: red;
position: fixed;
top: 20%! important;
left: 20%! important;
}
}

@ media (min-width: 1300px) {

. {modal-dialog
background-color: # 6e7ec3;
position: fixed;
top: 40%! important;
left: 35%! important;
}
}

さまざまな解像度でテストを行いましたが、動作します!