Bootstrap 4中的垂直中心模态对话框。
注意:添加了以下要求以明确我正在寻找一种适当的方法来垂直居中Bootstrap模式,涵盖所有可能的设备,在所有浏览器中。在我的情况下,我想要一个大型SPA在整个应用程序中重用相同的模式,所以我需要它在每种情况下工作。
这应该:
1%
display:table-cell
或类似的黑客(任何布局技术并不意味着或设计用于布局)click
以外的任何地方(包括上方和下方)靠近tap
或.modal-content
。更新,截至Beta 3,[docs]:
将
.modal-dialog-centered
添加到.modal-dialog
以垂直居中模态。
原始答案:
SCSS
:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
@media(max-width: 768px) {
min-height: calc(100vh - 20px);
}
}
或没有前缀的CSS
:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
}
@media(max-width: 768px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
注1:请注意,完全加前缀的CSS逐渐变得过时,因为某些属性的浏览器支持会发生变化。获取更新的前缀CSS的正确方法是:
> 0%
)。注2:这个答案是在v4(alpha 3或4)的早期阶段添加的,现在处于测试阶段。您可以通过将以下类添加到.modal-dialog
来安全地替换此答案的CSS部分:
h-100 d-flex flex-column justify-content-center my-0
......,正如@Androbaut在下面的评论中指出的那样。您仍然需要JavaScript(见下文)来关闭模态窗口下方/上方的click tap
上的模态窗口。
jQuery
(需要在点击/点击上方/下方关闭模式):
$('.modal-dialog').on('click tap', function(e){
if ($(e.target).hasClass('modal-dialog')) {
$('.modal').modal('hide');
}
})
而已。
使用不同模式大小的工作代码段,完全带前缀的CSS和标记:
$('.modal-dialog').on('click tap', function(e){
if ($(e.target).hasClass('modal-dialog')) {
$('.modal').modal('hide');
}
})
.modal-dialog {
min-height: -webkit-calc(100vh - 60px);
min-height: -moz-calc(100vh - 60px);
min-height: calc(100vh - 60px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: auto;
}
@media (max-width: 768px) {
.modal-dialog {
min-height: -webkit-calc(100vh - 20px);
min-height: -moz-calc(100vh - 20px);
min-height: calc(100vh - 20px);
}
}
/* you don't need the CSS below this line. It's mainly cosmetic and for aligning the modal launch buttons */
.modal-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.modal-content > * {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-moz-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.modal-content > *.modal-body {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#Modal_2 .modal-content {
min-height: 50vh;
}
#Modal_3 .modal-content {
min-height: 85vh;
}
#Modal_4 .modal-content {
min-height: 200vh;
}
.full-page-center {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 100vh;
}
.full-page-center button {
margin: 15px;
}
@media (max-width: 768px) {
.full-page-center {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.full-page-center button {
display: block;
min-width: 100%;
margin: 10px 15px;
}
.full-page-center::after {
display: none;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<div class="container full-page-center">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal_1">
Tiny modal
</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#Modal_2">
Normal modal
</button>
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#Modal_3">
Large modal
</button>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal_4">
Very large modal
</button>
</div>
<div class="modal fade" id="Modal_1" tabindex="-1" role="dialog" aria-labelledby="modalLabel_1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabel_1">Tiny modal</h4>
</div>
<div class="modal-body">
I am cute...
</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>
<div class="modal fade" id="Modal_2" tabindex="-1" role="dialog" aria-labelledby="modalLabel_2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabel_2">Dull modal</h4>
</div>
<div class="modal-body">
I am normal...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Some action</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_3" tabindex="-1" role="dialog" aria-labelledby="modalLabel_3" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabel_3">Don't call me fat</h4>
</div>
<div class="modal-body">
Call me "oversized".
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Some action</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_4" tabindex="-1" role="dialog" aria-labelledby="modalLabel_4" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabel_4">Huge modal</h4>
</div>
<div class="modal-body">
Comments, anyone?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Some action</button>
</div>
</div>
</div>
</div>
如果您发现任何错误或缺点,请告诉我。我会花时间改进答案并保持有用。欢迎帮助完成此任务。
这是一个简单的Flexbox方法。
SCSS
.modal-open .modal {
display: flex!important;
align-items: center!important;
.modal-dialog {
flex-grow: 1;
}
}
此解决方案适用于需要滚动的小型和长型模态。
添加这些自定义css规则:
.modal-header {
flex-shrink: 0;
}
.modal-body {
overflow-y: auto;
}
并添加这些类:
modal-dialog
:h-100 my-0 mx-auto d-flex flex-column justify-content-center
modal-content
:m-2
像这样:
<div class="modal-dialog h-100 my-0 mx-auto d-flex flex-column justify-content-center" role="document">
<div class="modal-content m-2">
...
</div>
</div>
将.modal-dialog-centered添加到.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="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>
有一种更简单的方法可以实现这一点,而无需编写一堆CSS覆盖或其他自定义CSS,基本上只使用库存引导类并添加一个额外的HTML元素来控制高度。
.modal > .row{
flex: 1;
}
<div id="dialogBox" class="modal fade d-flex">
<div class="row justify-content-center"> <!-- Vertically Align Modal -->
<div class="modal-dialog align-self-center" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
$("#dialogBox").modal('show');
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialogBox">
Launch demo modal
</button>
可能有一种方法只使用引导程序.row
,.col
和flex-XXX
类来实现所需的结果,但我无法使其工作。
最后一点,您可能需要添加:<body class="d-flex">
以使所有内容工作,具体取决于CSS的其余部分。
有一种方法可以使用bootstrap类,h-100
和w-100
来实现这一点:
<div id="dialogBox" class="modal fade d-flex">
<div class="row justify-content-center w-100"> <!-- Vertically Align Modal -->
<div class="modal-dialog align-self-center" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
只需添加以模态对话为中心的类以及模型对话框,如下所示
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<button class="btn btn-success" data-toggle="modal" data-target="#MyModal">Launch Modal</button>
<div class="modal align-middle" id="MyModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
使模态垂直对齐的另一种简单方法是将top: 50%;
,transform: translateY(-50%);
和margin: 0 auto
调整为模态对话框类。
编辑:缺点是你还必须将max-height: 100vh;
设置为.modal-content
。否则,当您的模态比视口更高时,模态的顶部不再可访问。
演示:
.modal.vertically-modal .modal-dialog {
transform: translateY(-25%);
top: 50%;
margin: 0 auto;
}
.modal.vertically-modal.show .modal-dialog {
transform: translateY(-50%);
}
.modal-content {
max-height: 100vh;
overflow-y: auto;
padding: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js "></script>
<button class="btn btn-primary" data-toggle="modal" data-target=".vertically-modal">Show modal</button>
<div class="modal fade vertically-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
Vertically modal
</div>
</div>
</div>
通过将以下css添加到'.modal-dialog'类,它对我来说很好。您也可以使用自定义css类覆盖。
.modal-dialog {
height: 100vh;
display: flex;
align-items: center;
}