这个问题分为两部分:
当你不知道模态的确切高度时，你如何将模态垂直地放置在中心? 是否有可能有模态居中，并有溢出:auto在模态体，但只有当模态超过屏幕高度?
我试过用这个:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容远远大于垂直屏幕尺寸时，这给了我所需要的结果，但对于较小的模式内容，这几乎是不可用的。
当前回答
.modal { } .vertical-alignment-helper { display:table; height: 100%; width: 100%; } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; } .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; } <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <!-- Button trigger modal --> <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> </body>
CSS:
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.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;
}
HTML:
<!-- Button trigger modal -->
<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>
参考:http://jsfiddle.net/rensdenobel/sRmLV/13/
其他回答
我写的最普遍的解。动态计算对话框高度。(下一步可能是重新计算窗口大小的对话框的高度。)
JSfiddle: http://jsfiddle.net/8Fvg9/3/
// initialise on document ready
jQuery(document).ready(function ($) {
'use strict';
// CENTERED MODALS
// phase one - store every dialog's height
$('.modal').each(function () {
var t = $(this),
d = t.find('.modal-dialog'),
fadeClass = (t.is('.fade') ? 'fade' : '');
// render dialog
t.removeClass('fade')
.addClass('invisible')
.css('display', 'block');
// read and store dialog height
d.data('height', d.height());
// hide dialog again
t.css('display', '')
.removeClass('invisible')
.addClass(fadeClass);
});
// phase two - set margin-top on every dialog show
$('.modal').on('show.bs.modal', function () {
var t = $(this),
d = t.find('.modal-dialog'),
dh = d.data('height'),
w = $(window).width(),
h = $(window).height();
// if it is desktop & dialog is lower than viewport
// (set your own values)
if (w > 380 && (dh + 60) < h) {
d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
} else {
d.css('margin-top', '');
}
});
});
.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;
}
并调整一点点。fade class，以确保它出现在窗口的顶部边界之外，而不是中心
我已经从bellow link下载了bootstrap3-dialog，并修改了bootstrap-dialog.js中的open函数
https://github.com/nakupanda/bootstrap3-dialog
Code
open: function () {
!this.isRealized() && this.realize();
this.updateClosable();
//Custom To Vertically centering Bootstrap
var $mymodal = this.getModal();
$mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
$mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
//END
this.getModal().modal('show');
return this;
}
Css
.centerModal .modal-header{
text-align:left;
}
.centerModal .modal-body{
text-align:left;
}
这是相当老的，并特别要求使用Bootstrap 3的解决方案，但任何人都想知道:从Bootstrap 4有一个内置的解决方案称为.modal-dialog-centered。问题是:https://github.com/twbs/bootstrap/issues/23638
所以使用v4，你只需要添加.modal-dialog- centric到.modal-dialog来垂直居中模态:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- 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">×</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>
Demo
使用这个简单的脚本将情态动词居中。
如果你愿意，你可以设置一个自定义类(例如:.modal。mode -vcenter(而不是.modal)来限制某些模式的功能。
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;
}
