垂直方向に中央揃えのBootstrapモーダルウィンドウ
私はモーダルをビューポート（中央）に集中させたいです私はいくつかの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);
}
})
これは仕事をします： http://jsfiddle.net/sRmLV/1140/
それはヘルパーdivといくつかのカスタムcssを使用します。 JavaScriptやjQueryは必要ありません。
HTML（ブートストラップの デモコード に基づく）
<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">×</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;
}
Gpcolaの答えは私のためにうまくいかなかったので、私は今その作品を編集しました。変換ではなく「margin-top」を使用しました。また、私は「表示」イベントの代わりに「表示」イベントを使用しています。これは、後にポジショニングが非常に悪いジャンプをしたためです（ブートストラップアニメーションがオンのときに表示されます）。配置する前に必ず "block"に設定してください。そうしないと$ 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));
これは私が私のアプリのためにしたことです。 bootstrap.cssファイルの次のクラスを見てみると、.modal-dialogのデフォルトのパディングは10pxと@media screenで、（min-width：768px）.modal-dialogのトップパディングは30pxに設定されています。そのため、私のカスタムCSSファイルでは、メディアの画面幅を指定せずに、すべての画面で上部パディングを15％に設定しました。お役に立てれば。
.modal-dialog {
padding-top: 15%;
}
すべてのHTML5ブラウザで見つけた最良の方法：
body.modal-open .modal {
display: flex !important;
height: 100%;
}
body.modal-open .modal .modal-dialog {
margin: auto;
}
<!-- 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">×</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;
}
カスタム宣言で設定された値を強制するために、topパラメータが.modal.fade.inでオーバーライドされています。topの後に!importantキーワードを追加します。これにより、ブラウザはその値を使用し、キーワードの他の値を無視します。これには、他の場所で値を上書きできないという欠点があります。
.modal {
position: fixed;
top: 50% !important;
left: 50%;
}
これは私のために完璧に動作します。
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
あなたが使用することができます：
.modal {
position: fixed;
top: 50% !important;
left: 50%;
transform: translate(-50%, -50%);
}
垂直方向と水平方向の両方で中央に配置します。
ここでの答えの大部分はうまくいかなかったか、あるいは部分的にしかうまくいっていないからです。
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は素晴らしかったでしょう、しかしそれは移行が完了した後にだけ追加されるように見えます。幸いなことに、ブートストラップは常に表示されるようにモーダルにstyle属性を適用するので、これは少し厄介ですが、うまくいきます。
:not([style='display: none;'])部分は、スタイル属性を正しく削除せずに、ダイアログを閉じたときにスタイル表示をnoneに設定してブートストラップするための回避策です。
あなたはそのような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/
これを行うための最も簡単で簡単な方法はFlexboxを使用することです。以下はBootstrap 3モーダルを画面中央に垂直に配置するもので、ここに掲載されている他のすべてのソリューションよりもはるかにクリーンでシンプルです。
body.modal-open .modal.in {
display: flex !important;
align-items: center;
}
注：これが最も簡単な解決策ですが、ブラウザのサポートのためにすべての人にとってうまくいくとは限りません。 http://caniuse.com/#feat=flexbox
（いつものように）IEが遅れているように見えます。私の場合、私が自分用またはクライアント用に開発した製品はすべてIE 10 +です。 （古いバージョンのIEをサポートする開発時間を費やして実際に製品を開発し、MVPを早く出すことができれば、ビジネス的には意味がありません）。これは確かに皆が持っている贅沢ではありません。
Flexboxがサポートされているかどうかを大規模なサイトが検出し、ページの本体にクラスを適用するのを見たことがありますが、そのレベルのフロントエンドエンジニアリングはかなり堅牢であり、まだフォールバックが必要です。
私は人々がウェブの未来を受け入れることを奨励するでしょう。 Flexboxはすごいので、できれば使い始めるべきです。
P.S - このサイトは本当に私がflexboxを全体として把握して、どんなユースケースにもそれを適用するのを助けました： http://flexboxfroggy.com/
編集：1ページに2つのモーダルの場合、これは.modal.inに適用されるべきです。
Bootstrap 4以降、JavaScriptなしでこれを実現するために次のクラスが追加されました。
modal-dialog-centered
あなたは彼らのドキュメント をここに見つけることができます 。
利点：
- 機器より背が高い場合でもモーダルコンテンツにアクセス可能
display:table-cellを使用しません（これはレイアウト用ではありません）- デフォルトのBootstrap 3モーダル
markupを変更する必要はありません。 - ポジショニングは純粋なCSSです。その上下のクリック/タップでモーダルを閉じるためのJSが追加されました
SCSSまたはgulpを使う人のために、接頭辞なしのgruntを含めました。
// 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">×</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の最新の仕様に合わせて最新の状態に保ちます。Bootstrap4の解決策については、 この回答を参照してください （今のところ、それらはほぼ同じですが、やがて分岐する可能性があります）。あなたがそれにバグや問題を見つけたら、私に知らせてください、そして私は更新します。ありがとう。
クリーンで接頭辞の付いていない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);
}
}
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;
}
私達にjavascriptする必要はありません。 Boostrap modalは表示されたときに.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%;
}
さらに別の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
さらに洗練する必要があります。
以下の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;
}
私はこれがRens de Nobelのソリューションよりも少しきれいな純粋なCSSソリューションだと思います。また、これはダイアログの外側をクリックしてダイアログを閉じることを妨げません。
http://plnkr.co/edit/JCGVZQ?p=preview
.modal-dialogクラスを使用してDIVコンテナにCSSクラスを追加するだけで、ブートストラップCSSよりも高度な特殊性が得られます。中心.
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%);
}
あるいはflexboxを使うのがもっと簡単です。
CSS
.modal {
display: flex;
align-items: center;
justify-content: center;
}
私の選択、ほんの少しの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;
}
モーダルの表示方法を変更するための最初のルールを試すことができます。
使用方法：ブートストラップ3.3.4
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));
ブートストラップ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});
これはBS2で動作しますが、V2ではテストされていません。モーダルを垂直方向の中央に配置します。それはそこに遷移することに注意してください - それを単に位置に表示させたい場合は.modal-dialogのCSS transitionプロパティを編集してください
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);
});
これは、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);
});
モーダルを真に中央揃えダイアログにする。
/* 注意：
1.セレクタを割り当てる必要がない場合でも、ドキュメントからすべてのモーダルを検索し、それを縦方向の中央に配置します。
特定のモードが中央になるのを避けるために2. Clickイベントでセレクタを使わない
* /
$( "[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);
});
ミラノ・パンディア発
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)
});
.modal.in .modal-dialog {
position: relative;
top: 50%;
transform: translateY(-50%);
}幅と高さを使ってモーダルを集中化するための最善の解決策は、css addとmodalでクラスとしてこの 'centralize'を追加することです。
.centralize{
position:absolute;
left:50%;
top:50%;
background-color:#fff;
transform: translate(-50%, -50%);
width: 40%; //specify watever u want
height: 50%;
}
この質問に対する別のCSS回答...
このソリューションでは、CSSを使用してモーダルを外側でクリックして閉じる機能を維持しながら、目的の効果を達成しています。また、ポップアップがビューポートを超えて大きくならないように、.modal-contentの高さと幅の最大値を設定することもできます。コンテンツがモーダルサイズを超えると、スクロールが自動的に表示されます。
注：
これが適切に動作するためには、ブートストラップ推奨の.modal-dialogdivを省略する必要があります（何も壊れているようには見えません）。 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クラスでは、ユーザーがモーダル自体の外側をクリックしてモーダルを閉じることができるかどうかを選択できます。ほとんどのモーダルには、明示的な「閉じる」または「キャンセル」ボタンがあります。この回避策を使用するときは、この点に注意してください。
モーダルを中心とするこの単純なスクリプトを使用してください。
必要に応じて、機能を一部のモーダルのみに制限するようにカスタムクラス（例：.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;
}