1.モーダルの正確な高さがわからない場合、モーダルを垂直方向の中央に配置するにはどうすればよいですか？
高さを宣言せずにBootstrap 3 Modalを完全に中央に配置するには、最初にこれをスタイルシートに追加してBootstrap CSSを上書きする必要があります。
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
これにより、モーダルダイアログの左上隅がウィンドウの中央に配置されます。
このメディアクエリを追加する必要があります。そうしないと、モーダルマージンレフトが小さなデバイスで間違っています。
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
次に、JavaScriptで位置を調整する必要があります。そのためには、要素の高さと幅の半分に等しい負の上マージンと左マージンを要素に与えます。この例では、Bootstrapで使用できるため、jQueryを使用します。
$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
アップデート（2015年1月10日）：
Finikの答えを追加。不明のセンタリングへのクレジット。
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
負のマージン右に注意してください？これにより、インラインブロックによって追加されたスペースが削除されます。そのスペースにより、モーダルはページの下部に移動します@media width <768px。
2.モーダルを中央に配置し、モーダル本体にオーバーフロー：自動を設定することはできますか？ただし、モーダルが画面の高さを超えている場合のみですか？
これは、モーダル本体にオーバーフロー-y：autoと最大高さを与えることで可能になります。これを適切に機能させるには、もう少し作業が必要です。これをスタイルシートに追加することから始めます。
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
再びjQueryを使用してウィンドウの高さを取得し、最初にモーダルコンテンツの最大高さを設定します。次に、modal-contentをmodal-headerおよびmodal-footerで差し引くことにより、modal-bodyのmax-heightを設定する必要があります。
$('.modal').on('shown.bs.modal', function() {
var contentHeight = $(window).height() - 60;
var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;
$(this).find('.modal-content').css({
'max-height': function () {
return contentHeight;
}
});
$(this).find('.modal-body').css({
'max-height': function () {
return (contentHeight - (headerHeight + footerHeight));
}
});
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
Bootstrap 3.0.3を使用すると、動作するデモを見つけることができます。http：//cdpn.io/GwvrJ
編集：私は、より応答性の解決のために代わりに更新されたバージョンを使用することをお勧め：http://cdpn.io/mKfCc
アップデート（2015/11/30）：
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element
.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function() {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function() {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});
（2015年11月30日更新http://cdpn.io/mKfCc上記の編集）