Bootstrap3的modal不是居中的,下面的代码可以做到这一点。
代码很容易理解。 有一个处理重新定位的函数和几个事件处理程序:
**
* Vertically center Bootstrap 3 modals so they aren't always stuck at the top
*/
$(function() {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function() {
$('.modal:visible').each(reposition);
});
});
即使调整窗口大小,这也会使您的模态垂直居中。