ブートストラップモーダルの垂直センタリングの問題

Question

私は、このjQuery関数を垂直中央モーダルに使用しています。

var centeredModal = function() { 
    var modalVerticalCenterClass = ".modal"; 

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

}; 

この機能は機能しますが、時には機能しません。
モーダルを閉じて複数回開くと、モーダルが正しく中央揃えされません。
問題は '$ clone.find（'。modal-content '）。height（）'ですか？
どうすれば修正できますか？

Answer 1

jQueryを使用しないで、display: tableをメインコンテンツコンテナとして、margin: autoと一緒に使用できます。これらのルールは、ページ内のモーダル（divなど）を、動的である可能性のある高さを気にしないように集中させます。

その後、モーダル（モーダルヘッダ、モーダルボディ、モーダルフッタ）の各セクションにdisplay: table-rowを使用するか、内部コンテナ用にdisplay: table-cellを使用することができます。ただし、この2番目の手順は省略できます。これを使用して（表示）表の一貫性を維持することをお勧めします。

この実例はcentered modal is hereです。

前述のように、この解決策では、高さにかかわらず常にモーダルがページの中央に表示されます。例の段落を削除し、フィドルを再実行すると簡単にプレーできます。あなたはモーダル開閉をトリガするためにはJavaScript（jQueryのまたはwathever）のいくつかの並べ替えを必要とする、確かに

.modal-content { 
    display: table; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    max-width: 60%; /* here you can also use a fixed width */ 
    overflow: auto; 
    z-index: 50; 
} 

：

は基本的に、これらは重要なルールです。この時点で、これを開いて開いたときにモーダルの下のページがスクロールするのを防ぐクラスをbodyに追加することもお勧めします。