这是一个两部分问题:
-
当您不知道模态的确切高度时,如何将模态垂直放置在中心?
-
是否可以让模态居中并且在模态体中有溢出:自动,但仅当模态超过屏幕高度时?
我试过用这个:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
当内容比垂直屏幕尺寸大得多时,这给了我所需的结果,但对于小模态内容,它几乎无法使用 .
30 回答
并调整一点.fade类,以确保它出现在窗口的顶部边框之外,而不是中心
1. How can you position the modal vertically in the center when you don't know the exact height of the modal?
要在不声明高度的情况下绝对居中Bootstrap 3 Modal,首先需要通过将其添加到样式表来覆盖Bootstrap CSS:
.modal-dialog-center {/ *已编辑的类名10/03/2014 * /
保证金:0;
位置:绝对;
最高:50%;
左:50%;
}
这会将模态对话框的左上角定位在窗口的中心 . 我们必须添加此媒体查询,否则小型设备上的模态margin-left错误:@media(max-width:767px){
.modal-dialog-center {/ *已编辑的类名10/03/2014 * /
宽度:100%;
}
}
现在我们需要用JavaScript调整它的位置 . 为此,我们给元素一个负的顶部和左边距等于其高度和宽度的一半 . 在这个例子中,我们将使用jQuery,因为它可以与Bootstrap一起使用 . $(' . modal') . on('shown.bs.modal',function(){
$(本).find( '模式 - 对话') . CSS({
'margin-top':function(){
return - ($(this).outerHeight()/ 2);
},
'margin-left':function(){
return - ($(this).outerWidth()/ 2);
}
});
});
更新(01/10/2015):
添加Finik's answer . 积分Centering in the Unknown .
注意负边际权利?这将删除内联块添加的空间 . 该空间导致模态跳转到页面底部@media width <768px .
2. Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?
这可以通过给模态体提供overflow-y:auto和max-height来实现 . 这需要更多的工作才能使其正常工作 . 首先将其添加到样式表中:
.modal-body {
overflow-y:auto;
}
.modal-footer {
margin-top:0;
}
我们将再次使用jQuery来获取窗口高度并首先设置模态内容的最大高度 . 然后我们必须设置模态体的最大高度,用modal-header和modal-footer减去模态内容:$(' . 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;
$(本).find( '模式内容') . CSS({
'max-height':function(){
返回内容高度;
}
});
$(本).find( '模态体') . CSS({
'max-height':function(){
return(contentHeight - (headerHeight footerHeight));
}
});
$(本).find( '模式 - 对话') . 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日):
(2015年3月31日更新http://cdpn.io/mKfCc,以上编辑)
我的解决方案
它可以简单地用
display: flex
修复With prefix
我想出了一个纯粹的CSS解决方案!这是css3虽然,这意味着ie8或更低版本不受支持,但除此之外,它已经过测试并正在开发ios,android,ie9,chrome,firefox,桌面游戏 .
我使用以下css:
这是一个小提琴 . http://codepen.io/anon/pen/Hiskj
..选择这个作为正确的答案,因为没有额外的重javascript,如果有多个模态,浏览器就会瘫痪 .
如果您对使用flexbox没问题,那么这应该有助于解决它 .
我的解决方案
在我的例子中,我所做的就是在知道模态高度的情况下设置我的CSS中的Top
<div id="myModal" class="modal fade"> ... </div>
在我的CSS我设置
扩展@Finik的优秀答案,此修复程序仅适用于非移动设备 . 我在IE8,Chrome和Firefox 22中进行了测试 - 它适用于很长或很短的内容 .
使用css有一种最简单的方法:
而已 . 请注意,它只需要应用于
.modal-dialog
容器div .演示:https://jsfiddle.net/darioferrer/0ueu4dmy/
我写的最通用的解决方案 . Dynamicaly计算对话框高度 . (下一步可能是在窗口调整大小时重新计算对话框的高度 . )
JSfiddle:http://jsfiddle.net/8Fvg9/3/
从here找到了完美的解决方案
我从bellow链接下载了bootstrap3-dialog并修改了bootstrap-dialog.js中的open函数
https://github.com/nakupanda/bootstrap3-dialog
Code
Css
这是另一种仅适用于css的方法,它基于此:http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
青菜:
这对我有用:
尝试这样的事情:
您可能想要查看这个方法集合,以便将div绝对居中:http://codepen.io/shshaw/full/gEiDt
一个简单的方法 . 为我工作 . 谢谢rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/
另一个解决方案将为
window.resize
事件和show.bs.modal
上的每个可见模态设置有效位置:我知道这有点晚了,但我正在添加一个新的答案,以便它不会在人群中迷失 . 它是一个跨桌面移动浏览器解决方案,可以在任何地方正常运行 .
它只需要将
modal-dialog
包装在modal-dialog-wrap
类中,并且需要添加以下代码:对话框以中心开始,在大内容的情况下,它只是垂直增长,直到出现滚动条 .
这是一个工作小提琴,为您的乐趣!
https://jsfiddle.net/v6u82mvu/1/
添加这个简单的CSS也有效 .
考虑使用这里找到的bootstrap-modal插件 - https://github.com/jschr/bootstrap-modal
该插件将以您的所有模态为中心
对于居中,我不知道过于复杂的解决方案 . bootstrap已经为你水平居中,所以你不需要弄乱它 . 我的解决方案只是使用jQuery设置一个上边距 .
我使用了loaded.bs.modal事件,因为我正在远程加载内容,并且使用shown.ba.modal事件导致高度计算不正确 . 当然,如果您需要响应窗口,您可以添加一个事件来调整窗口大小 .
非常简单的方法来实现这个概念,你将得到模态总是在你的屏幕的模块由css作为fllow:http://jsfiddle.net/jy0zc2jc/1/
你必须通过以下css将
modal
类显示为表:和
modal-dialog
为display:table-cell
在给定的小提琴中看到完整的工作示例
它并不复杂 .
请试试这个:
使用这个以模态为中心的简单脚本 .
如果需要,可以设置自定义类(例如:.modal.modal-vcenter而不是.modal),仅将功能限制为某些模态 .
还为模态的水平间距添加此CSS修复;我们在模态上显示滚动,主体滚动由Bootstrap自动隐藏:
在移动设备中,它可能看起来有点不同,这是我的代码 .
将模态中心设置为屏幕