这个问题分为两部分:
当你不知道模态的确切高度时，你如何将模态垂直地放置在中心? 是否有可能有模态居中，并有溢出:auto在模态体，但只有当模态超过屏幕高度?
我试过用这个:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容远远大于垂直屏幕尺寸时，这给了我所需要的结果，但对于较小的模式内容，这几乎是不可用的。
当前回答
最简单的解决方案是在页面顶部添加模态对话框样式，或者用下面的代码导入css:
<style>
.modal-dialog {
position:absolute;
top:50% !important;
transform: translate(0, -50%) !important;
-ms-transform: translate(0, -50%) !important;
-webkit-transform: translate(0, -50%) !important;
margin:auto 50%;
width:40%;
height:40%;
}
</style>
模态声明:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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>
情态用法:
<a data-toggle="modal" data-target="#exampleModalCenter">
...
</a>
其他回答
我已经从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;
}
我想出了一个纯css解决方案!虽然它是css3，这意味着ie8或更低的不支持，但除此之外，它的测试和工作在ios, android, ie9+， chrome, firefox，桌面safari..
我使用下面的css:
.modal-dialog {
position:absolute;
top:50% !important;
transform: translate(0, -50%) !important;
-ms-transform: translate(0, -50%) !important;
-webkit-transform: translate(0, -50%) !important;
margin:auto 5%;
width:90%;
height:80%;
}
.modal-content {
min-height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.modal-body {
position:absolute;
top:45px; /** height of header **/
bottom:45px; /** height of footer **/
left:0;
right:0;
overflow-y:auto;
}
.modal-footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
这是一把小提琴。 http://codepen.io/anon/pen/Hiskj
．．选择这个作为正确答案，因为在多个情态动词的情况下，没有额外的沉重javascript会让浏览器崩溃。
一个简单的方法。为我工作。谢谢rensdenobel:) http://jsfiddle.net/rensdenobel/sRmLV/13/
<style>
.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;
}
</style>
<!-- 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>
还有另一种解决方案，它将为窗口上的每个可见模态设置有效的位置。调整大小事件和show.bs.modal:
(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);
在移动plantform中，它可能看起来有点不同，这是我的代码。
<div class="modal-container">
<style>
.modal-dialog{
margin-top: 60%;
width:80%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 100%
}
@media screen and (orientation:landscape){
.modal-dialog{
margin-top: 70;
width:80%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 100%
}
}
.modal-body{
text-align: center;
}
.modal-body p{
margin:14px 0px;
font-size: 110%;
}
.modal-content{
border-radius: 10px;
}
.modal-footer{
padding:0px;
}
.modal-footer a{
padding: 15px;
}
.modal-footer a:nth-child(1){
border-radius: 0px 0px 0px 10px;
}
.modal-footer a:nth-child(2){
border-radius: 0px 0px 10px 0px;
}
</style>
<h2>Basic Modal Example</h2>
<div data-toggle="modal" data-target="#myModal">Div for modal</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>确定要取消本次订单嘛？</p>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-default" data-dismiss="modal">确定</a>
</div>
</div>
</div>
</div>
</div>
</div>
